Angle2でのDOM置換を防ぐ方法AngleFire2での非同期化について

Question

私はanglefire2を使って、angle2アプリにメッセージの非同期リストを持っています。

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

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

Answer 1

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

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; 
} 

Answer 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>