@for
ループで指定されたトラック式が、特定のコレクションに対して重複するキーを評価しました。例:
@Component({ template: `@for (item of items; track item.value) {{{item.value}}}`,})class TestComponent { items = [{key: 1, value: 'a'}, {key: 2, value: 'b'}, {key: 3, value: 'a'}];}
上記の例では、item.key
トラック式は、2つの重複するキー a
(インデックス0と2にあります)を見つけます。
重複するキーは、正確性の観点から問題があります。@for
ループはアイテムを一意に識別できないため、DOM移動または破壊する際に、別の アイテム(同じキーを持つ)に対応するDOMノードを選択する可能性があります。
重複するキーには、パフォーマンス上のペナルティも伴います。内部的にAngularは、重複するキーを持つコレクションを繰り返す際に、より洗練された、速度の遅いデータ構造を使用する必要があります。
エラーの修正
トラック式を、コレクション内のアイテムを一意に識別するように変更してください。上記で説明した例では、正しいトラック式は、一意の key
プロパティ(item.key
)を使用します。
@Component({ template: `@for (item of items; track item.key) {{{item.value}}}`,})class TestComponent { items = [{key: 1, value: 'a'}, {key: 2, value: 'b'}, {key: 3, value: 'a'}];}