Angular 2 ngFor 在索引 + 2 处错误地更改值

Question

我在 angular 中有一个表格。该表单由一个带有多个 select 的 ngFor 组成。

<div *ngFor="let item of items; let i = index">
  <select name="" id="" [(ngModel)]="items[i]">
    <option *ngFor="let option of options" [value]="option.value">{{option.display}}</option>
  </select>
</div>

以及此示例的数据：

options = Array(10).fill(1).map((option,index) => {
    return {
      display:'thing' + index,
      value: index
    };
  });
  items = [2,7,2,7,2,7,2,7];

奇怪的是，当我更改第 2 个 select 时，第 4 个 select 将反映相同的更改。但是，该模型不会反映此更改。

无论出于何种原因，视图都会在匹配后更改输入 2 索引。更奇怪的是，这只会在第一次发生，然后它就会按照您的预期运行。

这里是 plunker 看到的问题： http://plnkr.co/edit/q1YnoPBFdBKm0JDMVk7Q?p=preview

这是什么原因造成的？我该如何解决这个问题？

Answer 1

@yurzui 的答案是正确的 trackBy 防止任何不必要的突变。这是带有 trackBy 的代码：

<div *ngFor="let item of items; let i = index; trackBy: trackByFn">
  <select name="" id="" [(ngModel)]="items[i]">
    <option *ngFor="let option of options" [value]="option.value">{{option.display}}</option>
  </select>
</div>

trackBy取一个函数很重要，这是我解决这个问题的错误之一：

trackByFn(i: number) {
    return i;
  }

@yurzui 的工作示例提供程序：

https://plnkr.co/edit/TAbQFqa3NeBvQ3FpKYCP?p=preview

Angular 2 ngFor 在索引 + 2 处错误地更改值

Angular 2 ngFor changing values incorrectly at index + 2

ngfor

ngmodel

angular