@for ループで指定されたアイデンティティトラック式が、_すべての_アイテムに対応するDOMの再作成を引き起こしました。これは、イミュータブルなデータ構造を扱う際に発生する一般的な操作で、非常に高価です。例：
@Component({
template: `
<button (click)="toggleAllDone()">All done!</button>
<ul>
@for (todo of todos; track todo) {
<li>{{ todo.task }}</li>
}
</ul>
`,
})
export class App {
todos = [
{id: 0, task: 'understand trackBy', done: false},
{id: 1, task: 'use proper tracking expression', done: false},
];
toggleAllDone() {
this.todos = this.todos.map((todo) => ({...todo, done: true}));
}
}この例では、アイテムの "done" ステータスを切り替えた後、すべてのビュー（DOMノード、Angularディレクティブ、コンポーネント、クエリなど）を含むリスト全体が再作成されます（！）。ここでは、done プロパティへの比較的安価なバインディング更新で十分です。
DOMツリーを再作成すると、高いパフォーマンスペナルティに加えて、DOM要素のステート（例：フォーカス、テキストの選択、iframeでロードされたサイトなど）が失われます。
エラーの修正
アイテムのオブジェクトアイデンティティに関係なく、コレクション内のアイテムをユニークに識別するようにトラック式を変更します。説明した例では、正しいトラック式はユニークな id プロパティ（item.id）を使用します。
@Component({
template: `
<button (click)="toggleAllDone()">All done!</button>
<ul>
@for (todo of todos; track todo.id) {
<li>{{ todo.task }}</li>
}
</ul>
`,
})
export class App {
todos = [
{id: 0, task: 'understand trackBy', done: false},
{id: 1, task: 'use proper tracking expression', done: false},
];
toggleAllDone() {
this.todos = this.todos.map((todo) => ({...todo, done: true}));
}
}