在Angular ngFor中应该跟踪多少次

Question

我已经开始在应用程序中的某些trackBy迭代中使用ngFor，以提高性能。

调试时，我注意到trackBy函数被多次调用。我期望trackBy函数将被调用1 x n次，其中n是数组中的项数。

我在模板中有一个简单的无序列表

<ul>
  <li *ngFor="let item of items; trackBy: trackByFn">{{item.name}}</li>
</ul>

然后我在trackBy函数中返回项目的ID

trackByFn(index, item): void {
    return item.id;
}

在此StackBlitz中，trackBy函数在初始化时称为2 x n。 https://stackblitz.com/edit/angular-tm6zdh 在我的应用程序中，它甚至被称为7 x n次。

多次调用该函数是否正常？

多次调用该函数时，我会担心性能吗？

而且，trackBy函数实际上是何时由Angular触发的？我问，因为在我的应用中，trackBy函数在滚动页面时也会被触发，这不会更新列表中的任何项目。我无法在Stackblitz中复制它

Answer 1

这是Angular的标准更改检测运行。在组件的声明中添加changeDetection: ChangeDetectionStrategy.OnPush可以减少trackBy函数调用的数量。