如何在angular2 ng中防止DOM替换在angularfire2中的异步？

Question

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

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

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

Answer 1

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