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

Posted 2023-02-22

【中文标题】Angular 2 ngFor 在索引 + 2 处错误地更改值

【英文标题】：Angular 2 ngFor changing values incorrectly at index + 2

【发布时间】：2018-02-22 09:43:08

【问题描述】：

我有一个有角度的表格。该表单由一个带有多个选择的 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 次选择时，第 4 次选择会反映相同的更改。但是，该模型不会反映这种变化。

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

这是查看问题的关键： http://plnkr.co/edit/q1YnoPBFdBKm0JDMVk7Q?p=preview

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

【问题讨论】：

好问题。使用trackBy 解决它。 ***.com/questions/44476677/…这是你的例子plnkr.co/edit/TAbQFqa3NeBvQ3FpKYCP?p=preview

【参考方案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