錯誤百科

追蹤表達式為指定集合產生了重複的鍵

在 @for 迴圈中指定的追蹤表達式，為指定集合求值出重複的鍵，例如：

@Component({
  template: `@for (item of items; track item.value) {
    {{ item.value }}
  }`,
})
class Test {
  items = [
    {key: 1, value: 'a'},
    {key: 2, value: 'b'},
    {key: 3, value: 'a'},
  ];
}

在提供的範例中，item.value 追蹤表達式會找到兩個重複的鍵 a（位於索引 0 與 2）。

從正確性的觀點來看，重複的鍵是有問題的：由於 @for 迴圈無法唯一識別每個項目，在執行 DOM 移動或銷毀時，它可能會選到對應到_另一個_項目（具有相同鍵）的 DOM 節點。

重複的鍵也會帶來效能代價：在內部，Angular 在遍歷含有重複鍵的集合時，必須使用較複雜且較慢的資料結構。

修正方式

變更追蹤表達式，讓它能唯一識別集合中的項目。在討論的範例中，正確的追蹤表達式會使用唯一的 key 屬性（item.key）：

@Component({
  template: `@for (item of items; track item.key) {
    {{ item.value }}
  }`,
})
class Test {
  items = [
    {key: 1, value: 'a'},
    {key: 2, value: 'b'},
    {key: 3, value: 'a'},
  ];
}