에러 백과

컬렉션에서 중복된 키를 생성하는 추적 표현식

@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 추적 표현식은 인덱스 0과 2에서 중복된 키 a를 찾습니다.

중복 키는 동작의 정확성에 문제를 일으킵니다. @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'},
  ];
}