时间戳

首页 > 解决方案 > Angular 5 ngModel ngFor 不使用 trackBy

angular - Angular 5 ngModel ngFor 不使用 trackBy

问题描述

这是我的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

标签： angular

解决方案

在标签中使用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应该是唯一的，而原始代码中并非如此。

推荐阅读