角ngFor中的分量@输入

Question

我有下面的代码来生成卡片。Parent.component.html：

<div *ngFor="let goal of goalList" class="row col-8 my-3 offset-2">
  <div class="card" style="width: 100rem;">
    <div class="card-header">
      <div class="row">
        <app-comment class="col-1 text-left align-middle" [ID]=goal.id></app-comment>
        <div class="col-11 text-center text-center">{{'Goals.Goal'|translate}}</div>
        </div>
      </div> 
      <div class="card-body">
        <div class="row">
          <div class="col-11 card-text">{{goal.text}}</div>
        </div>
        <div class="row">
          <mat-slider thumbLabel tickInterval="1" max="5" step="0.5" class="col-10 offset-1"
          [(ngModel)]="goal.EMPrating" (ngModelChange)="SaveGoalRating(goal)" color="primary"></mat-slider>
        </div>
        <div class="row">
          <mat-form-field class="col-4 offset-4">
            <input name="ActualDate" matInput [matDatepicker]="dtpicker" placeholder="{{'Goals.ActualDate'|translate}}"
            [(ngModel)]="goal.ActualDate" (ngModelChange)="SaveGoalDate(goal)">
            <mat-datepicker-toggle matSuffix [for]="dtpicker"></mat-datepicker-toggle>
            <mat-datepicker #dtpicker></mat-datepicker>
          </mat-form-field>
        </div>
      </div>
    </div>
  </div>

在goalList中获取parent.component.ts的代码

  LoadGoals(){
    this.goalList = [];
    let goalArray: string[] = [];
    this.goalService.GetGoalResults(this.cookieService.get('email'),this.SurveyID).subscribe(result=>{
      result.split('\n').map(row=>{
        if (row != ""){
          goalArray = row.split(';');
          let d: Date = new Date (goalArray[3]);
          this.goalList.push({id:goalArray[0],text:goalArray[1],targetDate:null,ActualDate:d, status:null,EMPrating:Number(goalArray[2])});
        }
      })
    });
  }

目标课：

export class Goal {
    id:string;
    text:string;
    targetDate:string;
    ActualDate:Date;
    status:string;
}

comment.component.html：

<div>
  <button mat-icon-button data-toggle="modal" data-target="#CommentModal" color="primary">
    <i class="material-icons">question_answer</i>
  </button>
  <div class="modal fade" id="CommentModal" tabindex="-1" role="dialog" aria-labelledby="CommentTitle" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="CommentTitle">Comments</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="row mt-3">
            <textarea class="form-control col-10 offset-1" [(ngModel)]="CommentText"></textarea>
          </div>
          <div class="row my-3">
            <button class="btn btn-success oi oi-check col-2 offset-5" [disabled]="!HasComment()" (click)="SubmitComment()"></button>
          </div>
          <div class="row">
            <span class="offset-1">Here will be comments.</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

comment.component.ts：

import { Component, OnInit, Input } from '@angular/core';
import { CookieService } from 'ngx-cookie-service';
import { CommentService } from '../comment.service';

@Component({
  selector: 'app-comment',
  templateUrl: './comment.component.html',
  styleUrls: ['./comment.component.css']
})
export class CommentComponent implements OnInit {
  @Input() ID:string;
  private CommentText: string = "";
  constructor(private cookieService: CookieService, private commentService: CommentService) {
  }

  ngOnInit() {
  }
  SubmitComment(){
    alert(this.ID);
    //this.commentService.Submit("",this.cookieService.get('email'),this.CommentText);
  }
  HasComment():boolean{
    return this.CommentText != "";
  }
}

检查生成的html之后，它看起来很好。第一个应用程序注释包含

ng-reflect--i-d="10"

而第二个

ng-reflect--i-d="1010"

当SubmitComment()运行以警告ID输入时，它总是显示第一个目标(10)的ID。我如何将卡片的ID (goal.id)传递给它里面的应用程序评论？

打字本部分肯定没问题。我加了

<span>{{ID}}</span>

它显示了正确的ID。问题必须在html周围。

提前感谢！

Answer 1

经过一些评论之后，解决方案是给ID动态更改的[attr.data-target]="'#CommentModal'+ID"和`id=“‘CommentModal’+ id”‘Bootstrap获得第一个id "CommentModal“，所以它总是返回第一个id。