İzleme ifadesi verilen bir koleksiyon için yinelenen anahtarlar üretti.

@for döngüsünde belirtilen bir izleme ifadesi, verilen bir koleksiyon için yinelenen anahtarlar üretti, örneğin:

@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'},
  ];
}

Sağlanan örnekte item.value izleme ifadesi iki yinelenen anahtar a (indeks 0 ve 2'de) bulacaktır.

Yinelenen anahtarlar doğruluk açısından sorunludur: @for döngüsü öğeleri benzersiz şekilde tanımlayamadığından, DOM taşıma veya yok etme işlemleri gerçekleştirirken başka bir öğeye (aynı anahtara sahip) karşılık gelen DOM düğümlerini seçebilir.

Ayrıca yinelenen anahtarlarla ilişkili bir performans cezası da vardır - dahili olarak Angular, yinelenen anahtarlara sahip koleksiyonlar üzerinde yineleme yaparken daha karmaşık ve daha yavaş veri yapıları kullanmak zorundadır.

Hatayı düzeltme

İzleme ifadesini, bir koleksiyondaki bir öğeyi benzersiz şekilde tanımlayacak şekilde değiştirin. Tartışılan örnekte doğru izleme ifadesi benzersiz key özelliğini (item.key) kullanır:

@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'},
  ];
}