02 템플릿 구문 11

템플릿 입력 변수

hero 앞의 let 키워드는 hero라는 템플릿 입력 변수를 만듭니다. ngFor 디렉티브는 부모 컴포넌트의 heroes 프로퍼티에 의해 리턴 된 heroes 배열을 반복하고 매 반복마다 hero를 배열의 현재 항목으로 설정합니다.

hero의 속성에 액세스하려면 ngFor 호스트 엘리먼트 내에서 hero 입력 변수를 참조하고 그 하위 엘리먼트 내에서 hero 입력 변수를 참조합니다. 여기서는 보간에서 처음 참조 된 다음 <hero-detail> 컴포넌트의 hero 프로퍼티에 바인딩으로 전달됩니다.

src/app/app.component.html

<div *ngFor="let hero of heroes">{{hero.name}}</div> <hero-detail *ngFor="let hero of heroes" [hero]="hero"></hero-detail>

 

Index와 *ngFor

NgFor 디렉티브 컨텍스트의 index 프로퍼티는 각 반복에서 항목의 0부터 시작하는 인덱스를 리턴합니다. 템플릿 입력 변수에서 인덱스를 캡처하여 템플릿에서 사용할 수 있습니다.

다음 예제는 i라는 변수에서 색인을 캡처하고이를 영웅 이름과 함께 표시합니다.

src/app/app.component.html

<div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.name}}</div>

 

* ngFor with trackBy

NgFor 지시어는 성능이 좋지 않을 수 있습니다. 특히 큰 목록의 경우 성능이 떨어질 수 있습니다. 하나의 항목, 제거 된 항목 또는 추가 된 항목에 대한 작은 변경으로 인해 DOM 조작이 계단식으로 실행될 수 있습니다.

예를 들어 서버를 다시 쿼리하면 모든 새로운 영웅 개체로 목록이 재설정 될 수 있습니다.

대게, 전부는 아니지만 이전에 표시된 영웅들 입니다. 각 영웅의 id가 바뀌지 않았기 때문에 이것을 알 수 있습니다. 그러나 Angular는 새로운 객체 참조의 새로운 목록 만 봅니다. 이전 DOM 엘리먼트를 분해하고 모든 새 DOM 엘리먼트를 삽입 할 수 밖에 없습니다.

Angular는 trackBy를 사용하여 이 이탈을 피할 수 있습니다. NgFor가 추적해야하는 값을 리턴하는 메서드를 구성 요소에 추가합니다. 이 경우 그 값은 영웅의 ID입니다.

src/app/app.component.ts

trackByHeroes(index: number, hero: Hero): number { return hero.id; }

 

마이크로 구문 표현식에서 이 메소드로 trackBy를 설정하십시오.

src/app/app.component.html

<div *ngFor="let hero of heroes; trackBy: trackByHeroes">   ({{hero.id}}) {{hero.name}} </div>

다음은 trackBy 효과의 그림입니다. "Reset heroes"는 같은 hero.id로 새로운 영웅을 생성합니다. "Change ID"는 새로운 hero.id로 새로운 영웅을 만듭니다.

l  trackBy가 없으면 두 버튼 모두 DOM 엘리먼트 교체를 완료합니다.

l  trackBy를 사용하면 id 만 변경하면 엘리먼트가 대체됩니다.