angular - angularfire2でangular2 ngFor asyncでDOM置換を防ぐ方法は?

Question

angularfire2を使用してangular2アプリにメッセージの非同期リストがあります。

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

リストが更新されると、ngFor 内のすべての要素が再レンダリングされるように見えます。リスト内の新しいアイテムを再レンダリングすることは可能ですか?

Answer 1

データの取得時にオブジェクトの実際の参照を変更したため、再レンダリングが発生します。そのとき、ngForすべての DOM ノードが再描画されます。そのような場合は、trackByここで使用して、*ngForより賢くすることができます。

trackBy一意のID列に基づく必要があります。あなたの場合、それは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
}