Angular - 如何不重建使用 *ng 创建的列表，任何时候触发列表的每个元素上的事件

Question

我有一个简单的<div>生成 using*ngFor指令列表，类似于

<div *ngFor="let item of items() | async ; let i=index" 
  [ngClass]="getItemClass(i)"
  (click)="itemClick(i)"</div>

如您所见，该方法返回的 Observable 每次items()发出时都会异步填充列表。在我的情况下，这样的 Observable 是 a ReplaySubject，如果这对知道有任何用处。然后我<div>使用方法定义要应用于每个元素的类getItemClass。

我还想使用方法对每个项目上的点击事件做出反应itemClick(i: number)。

问题

任何时候div单击一个元素，即任何时候itemClick(i: number)运行该方法，似乎<div>都重建了整个s列表。我得出这个结论是观察到任何时候div点击一个元素，该items()方法也会运行。

题

<div>单击其中一个元素时是否可以避免重建列表？我已经设置changeDetection为OnPush但它似乎并没有解决我的问题。

Answer 1

是的，即使使用 onPush 也会触发更改检测。这将导致对 index() 方法的评估。这在文档中有点丢失。任何将冒泡到 zone.js 代码的事件都会触发对从根到该组件的每个组件的更改检测。设置 onPush 不会阻止。为了避免在循环中重新创建组件，您需要添加 trackBy。

在您的 html 模板中：

<li *ngFor="let hr of heroes;trackBy: trackByFn">{{hr.name}}</li>

然后在组件中你必须定义函数：

trackByFn(index, item) {    
   return item.id  
}

项目从循环中传递。如果该项目的 id 不会更改，则不会重新创建该项目。

此外，我会摆脱 index() 方法并将其替换为变量。正如我提到的，每次更改检测运行时都会对其进行评估。我写了一篇关于一些可以用来加速应用程序的性能技巧的文章。