如何在ngIf中给ngFor变量？

Question

I am having code like this:

<span *ngFor="let track_type of model.content_id.track_types">
    <label class="col-3">{{track_type}} Stream ID*:</label>
    <input type="text" name="stream_id_{{track_type}}" class="col-offset-1 col-3" #stream_id="ngModel" placeholder="{{track_type}} Stream ID" required [(ngModel)]="model.stream_id">
    <span *ngIf="stream_id.invalid && (stream_id.dirty || stream_id.touched)" class="col-offset-2 col-5 text-danger">Stream ID is required</span>
    <br>
</span>

There are two issues:

• If I edit one text box, it is affecting all the text boxes.
• It is unable to set the form validation properly

How do I resolve these issues? I tried looking at ngTemplateOutlet , but it's not really working as expected.

Answer 1

Use a trackByFunction

  trackByFn(index, item) {
    return index; // or item.id
  }

And in your template:

<span *ngFor="let track_type of model.content_id.track_types; trackBy: trackByFn">