我在使用 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中的DOM替换ngFor angularfire2中的异步?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39428351/