7

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

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

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

4

2 回答 2

8

发生重新渲染是因为您在数据检索时更改了对象的实际引用，那时角度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
}
于 2016-09-10T17:28:01.967 回答
2

这是我见过的最好的解决方案。

来自@jeffbcros

https://github.com/angular/angularfire2/issues/540#issuecomment-248780730

class MyComponent {
  trackFbObjects = (idx, obj) => obj.$key;
}

<message *ngFor="let message of messages | async; trackby: trackFbObjects " [message]="message"></message>
于 2016-12-22T19:05:03.703 回答