L'expression de suivi a produit des clés en double pour une collection donnée.

Une expression de suivi spécifiée dans la boucle @for a produit des clés en double pour une collection donnée, par ex. :

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

Dans l'exemple ci-dessus, l'expression de suivi item.value trouvera deux clés a en double (aux index 0 et 2).

Les clés en double posent un problème de justesse : comme la boucle @for ne peut pas identifier les éléments de manière unique, elle risque de choisir les nœuds du DOM correspondant à un autre élément (ayant la même clé) lors des déplacements ou des destructions dans le DOM.

Les clés en double ont aussi un coût en performances : en interne, Angular doit utiliser des structures de données plus sophistiquées et plus lentes pour itérer sur des collections comportant des clés en double.

Corriger l'erreur

Modifiez l'expression de suivi pour qu'elle identifie de manière unique un élément d'une collection. Dans l'exemple présenté, l'expression de suivi correcte utiliserait la propriété unique 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'},
  ];
}