私はanglefire2を使って、angle2アプリにメッセージの非同期リストを持っています。Angle2でのDOM置換を防ぐ方法AngleFire2での非同期化について
<message *ngFor="let message of messages | async" [message]="message"></message>
リストがngForのすべての要素を更新すると、再レンダリングされるように見えます。リスト内の新しい項目を再レンダリングすることは可能ですか?
私はanglefire2を使って、angle2アプリにメッセージの非同期リストを持っています。Angle2でのDOM置換を防ぐ方法AngleFire2での非同期化について
<message *ngFor="let message of messages | async" [message]="message"></message>
リストがngForのすべての要素を更新すると、再レンダリングされるように見えます。リスト内の新しい項目を再レンダリングすることは可能ですか?
データが取得されたときにオブジェクトの実際の参照を変更したため、再描画が発生しました。その時間は、すべての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;
}
だろうと言うことができます。
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>
それを聞いて@okhobbうれしいから、乾杯&感謝:) –
は、それは 'trackByすべきではありません:trackByFn'代わりに' trackBy = trackByFn'の? –
@GünterZöchbauerヘッドアップありがとう、それは私が逃した:) –