angular - 如何防止angular2中的DOM替换ngFor angularfire2中的异步？

Question

我在使用 angularfire2 的 angular2 应用程序中有一个异步消息列表。

<message *ngFor="let message of messages | async" [message]="message"></message>

当列表更新时，ngFor 中的所有元素似乎都重新呈现。是否可以只重新呈现列表中的新项目？

Answer 1

重新渲染的发生是因为您在数据检索时更改了对象的实际引用，此时 angular ngFor 重新绘制了所有 DOM 节点。对于这种情况，您可以在此处使用 trackBy，通过它您可以使 *ngFor 更智能。

trackBy 应该基于唯一标识列，在你的情况下我可以说它是 message.id

<message *ngFor="let message of messages | async;trackBy:trackByFn" [message]="message"></message>

代码

trackByFn(message: any){
   // return message != null ? message.id: null;
   // OR
   return message && message.id; //more better
}