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

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

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

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

最佳答案

重新渲染发生是因为您在数据检索时更改了对象的实际引用，那时 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
}

关于angular - 如何防止angular2 ngFor中的DOM替换angularfire2中的异步？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39428351/