angular+rxjs+firebaseでチャットを作ったときに、新しい発言があると過去分もすべて再読み込みされて困ったとき。

チャットの発言が格納されたcollectionをsubscribeしてると、発言が追加されると過去分まで全てsubscribeしてしまって画像とかが再描画されて嫌だったときにやったこと。

chat.component.html

<div *ngFor="let log of logs; let i = index ; trackBy: trackByLog">

chat.component.ts

trackByLog(index: number, value: ChatLog): string {
  return value ? value.documentId : null;
}

value.documentIdが対象のオブジェクトで一意になる前提。
ngforがそのキーを元にまだ表示されてないものがなんなのかを識別してくれてるイメージ。

※タイトルに「rxjs+firebase」と書いたけど、単にangularの基本的な関数です…