Angular 2 : *ngFor does not update when array is updated

Question

我有一个对象数组(我们称之为arr)。在我的组件输入之一的 (change) 方法中，我修改了这些对象的属性之一，但在 View (*ngFor) 中没有任何变化。我读到 Angular2 变化检测不检查数组或对象的内容，所以我尝试了这些:

this.arr = this.arr.slice();

和

this.arr = [...this.arr];

但是 View 没有改变，它仍然显示旧的属性。在带有 console.log() 的 (change) 方法中，我得到了正确的数组。很奇怪，但是这个有效:this.arr = [];我也尝试了 NgZone 和 markForCheck()。

Answer 1

您还可以在 *ngFor 表达式中使用 trackBy 选项，为数组中的每个项目提供唯一 ID。这确实让你 100% 负责变化检测，所以每次数组中的项目发生变化时更新这个(唯一的)属性。如果数组中的任何项目已被赋予不同的 trackBy 属性，Angular 将仅重新呈现列表:

*ngFor="let item of (itemList$ | async); trackBy: trackItem"

或:

*ngFor="let item of itemList; trackBy: trackItem"

哪里:

trackItem 是您组件中的公共(public)方法:

public trackItem (index: number, item: Item) {
  return item.trackId;
}