如何在 angular 4 中使用 ngModel 正确绑定数组？

Question

假设我有一个数组 [1,2,3]。我想迭代所有项目并将每个项目绑定到 ngModel。当我运行此代码更改第一个元素后，第二个元素获得相同的值。有什么问题？

<div *ngFor="let x of array; let i = index;">
    <input type="number" [(ngModel)]="x[i]">
</div>

Answer 1

ngFor 默认使用对象标识来比较值，这在使用原始值（数字、字符串、布尔值）时会中断，因为它们在修改时会改变标识）。使用 trackBy 允许将 ngFor 配置为 zse 索引而不是身份：

<div *ngFor="let x of array; let i = index;trackBy:trackByIdx">
    <input type="number" [(ngModel)]="array[i]">
</div>

trackByIdx(index: number, obj: any): any {
  return index;
}

How properly bind an array with ngModel in angular 4?