Frage Wie verhindert man DOM-Ersatz in angular2 ngFor async in angularfire2?


Ich habe eine asynchrone Liste von Nachrichten in einer angular2 App mit angularfire2.

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

Wenn die Liste alle Elemente in der ng aktualisiert, scheint sie erneut zu rendern. Ist es möglich, die neuen Elemente in der Liste einfach neu zu rendern?


5
2017-09-10 16:46


Ursprung


Antworten:


Das erneute Rendern geschieht, weil Sie die tatsächliche Referenz eines Objekts geändert haben, wenn die Daten abgerufen werden, also die angulare Zeit ngFor Zeichnen Sie alle DOM-Knoten neu. Für solche Fälle könnten Sie verwenden trackBy Hier kannst du deine machen *ngFor schlauer.

trackBy sollte auf einer eindeutigen Identitätsspalte basieren, in Ihrem Fall könnte ich sagen, dass es wäre message.id

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

Code

trackByFn(message: any){
   // return message != null ? message.id: null;
   // OR
   return message && message.id; //more better
}

7
2017-09-10 17:28



Das ist die beste Lösung, die ich gesehen habe.

von @Jeffbros

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>

2
2017-12-22 19:05