Выражение track, указанное в цикле @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 должен использовать более сложные и медленные структуры данных при итерации по коллекциям с дублирующимися ключами.
Исправление ошибки
Измените выражение отслеживания так, чтобы оно однозначно идентифицировало элемент в коллекции. В обсуждаемом примере корректное выражение track использовало бы уникальное свойство 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'},
];
}