Question

这是我的html

<div class="card">
  <div class="card-body" *ngFor="let bookInstance of bookInstanceList; trackBy: trackByBookList;">
     <label for="status">Status</label>
          <input type="text" class="form-control" id="status" placeholder="Status of the book" [(ngModel)]="bookInstance.status" name="status" required>
  </div>
</div>

这是我的打字稿

private bookInstanceList = [
      {
        "status": "Not Available",
      },
      {
        "status": "I am  Available",
      }
    ];

  trackByBookList(index: number, bookInstance: any): any {
    return index;
  }

我在trackBy上关注了许多教程，但是我仍然无法使第一个输入的输入字段为“不可用”，而第二个输入字段为“可用”。我认为是因为我正在使用输入标签？我正在使用角度5

Answer 1

在input标签中使用form字段时，请确保每个字段都有唯一的name（一组单选按钮除外，其中单选按钮的输入元素共享相同的名称）：

<div *ngFor="let bookInstance of bookInstanceList; let i=index; trackBy: trackByBookList;">
    <label>Status
        <input type="text" [name]="'status_' + i" [(ngModel)]="bookInstance.status" ...>
    </label>
</div>

您还可以考虑删除id属性。每个id应该是唯一的，原始代码中不是这种情况。

Angular 5 ngModel ngFor无法与trackBy一起使用

1 个答案: