Компонент @Input в Angular 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;
}

комментарий.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 () для оповещения о вводе идентификатора, он всегда показывает идентификатор первой цели (10).Как я мог передать идентификатор карты (goal.id) в комментарий к приложению внутри нее?

Машинописная часть в порядке.Я добавил

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

в comment.component.html, и он показывает правильный идентификатор.Проблема должна быть вокруг HTML.

Заранее спасибо!

Answer 1

после некоторых комментариев решение дает динамически изменяемый идентификатор [attr.data-target]="'#CommentModal'+ID" и [id]="'CommentModal'+ID" Bootstrap получает первый идентификатор "CommentModal", поэтому он всегда возвращает первый.