angular - angular *ngFor 如何检测可变项目的变化

Question

我想了解如何 *ngFor通过使用 IterableDiffers 在内部工作检测集合中的变化。IterableDiffers的默认实现是 DefaultIterableDiffer并比较两个值(来自旧的和新的集合)它使用 ===运算符(operator)。依托this方法:

export function looseIdentical(a: any, b: any): boolean {
  return a === b || typeof a === 'number' && typeof b === 'number' && isNaN(a) && isNaN(b);
} 

所以从逻辑上讲，如果集合包含对象并且这些对象的引用没有更改，则不会检测到更改。
但是 , 这个 example显示相反:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  items = [
    {id: 1, name: 'youyi'},
    {id: 2, name: 'kouki'},
    {id: 3, name: 'kouka'}
  ];

  constructor() {
     interval(1000).subscribe((i) => this.items[1].name = "kouki-" + i);
  }
}

每一秒过去后，我都可以看到第二个对象的值在增加而不改变其引用!
我在搞什么？代码的哪一部分进行比较？

Answer 1

ngFor通过引用跟踪对象数组。因此，如果对象数组的新引用传递给 ngFor ，即使数组具有相同的值，Angular 也会删除旧数组并重绘具有相同值的新集合。

但是，您可以使用 trackBy的 ngFor设置什么属性应该是更新 DOM 的触发器。

现在我们知道 ngFor如果将新引用分配给 ngFor 的变量，将重绘.尽管如此，值在 ngFor 中发生了变化甚至引用都是一样的。为什么？

因为有 NgZone。 NgZone 通知某些事情发生了变化并且 Angular 更新了 DOM。 NgZones 有 onTurnDone事件。每当触发此事件时，它都会执行一个 tick() 函数，该函数本质上执行更改检测。

You can read more here

更新:

As Angular docs says about ngFor and identifying whether the data is changed:

The identities of elements in the iterator can change while the data does not. This can happen, for example, if the iterator is produced from an RPC to the server, and that RPC is re-run. Even if the data hasn't changed, the second response produces objects with different identities, and Angular must tear down the entire DOM and rebuild it (as if all old elements were deleted and all new elements inserted).