How to prevent DOM replacement in angular2 ngFor async in angularfire2?

Question

I have a list of asynchronous messages in an angular2 application using angularfire2.

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

When the list refreshes all items in ngFor, it seems to display again. Is it possible to simply redisplay new items in a list?

Answer 1

Re-rendering happens because you changed the actual object reference while retrieving the data, and angular time ngForre-painted all the DOM nodes. For such cases, you can use it trackByhere, where you can make your *ngForsmarter.

trackBy , , message.id

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

trackByFn(message: any){
   return message != null ? message.id: null;
}

Answer 2

, .

from @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>