Angular에서 ngFor를 사용한 trackBy 함수

1. Angular에서 ngFor와 함께 trackBy 함수 사용
2. Angular에서 ngFor 함수 사용
3. Angular에서 ngFor와 함께 trackBy 사용

이 기사에서는 ngFor 지시문을 사용하여 trackyBy와 Angular에서의 활용에 대해 설명합니다.

Angular에서 ngFor와 함께 trackBy 함수 사용

Angular에서 trackBy 기능을 사용하면 사용자가 해당 키를 기반으로 목록의 각 항목을 분석하는 데 사용할 특정 키를 선택할 수 있습니다. trackBy는 각각에 대해 고유한 식별자를 제공하려는 중첩된 배열 및 개체가 있을 때 특히 유용합니다.

trackBy는 배열이나 객체의 현재 반복에만 적용되며 미래의 모든 반복에는 적용되지 않는다는 점에 유의하는 것이 중요합니다.

Angular에서 ngFor 함수 사용

HTML에는 기본 제공 템플릿 언어가 없기 때문에 Angular는 컴퓨터 언어의 for-loops와 유사한 ngFor와 같은 여러 지시문을 포함하는 강력한 템플릿 구문을 추가합니다.

NgFor는 배열이나 객체를 반복하는 데 사용할 수 있는 Angular의 내장 지시문입니다. 이 지시문은 목록의 각 항목에 대한 템플릿을 생성하여 ‘DOM’에 추가하고 항목에 변경 사항이 있을 때 ‘DOM’을 업데이트합니다.

통사론:

<ul>
  <li *ngFor="let item of items">{{ item.name }}</li>
</ul>

ngFor 지시문을 사용하여 배열 또는 개체 컬렉션을 반복합니다. 그러나 HTTP 요청에 대한 응답과 같이 특정 시점에 컬렉션의 정보를 업데이트해야 하는 경우 문제가 발생합니다.

결과적으로 Angular는 데이터와 연결된 모든 DOM 요소를 삭제하고 다시 만들어야 합니다. 이 문제를 해결하기 위해 Angular trackBy 기능을 돕습니다.

trackBy 함수는 index와 current item의 두 인수를 허용합니다. 항목의 특정 ID를 반환해야 합니다.

‘Angular’는 이제 특정 ID에 따라 추가되거나 제거된 구성 요소를 추적할 수 있습니다. 생성자만 배열을 업데이트할 때 이미 수정된 항목을 삭제합니다.

Angular에서 ngFor와 함께 trackBy 사용

Angular의 ngFor 지시문과 함께 trackBy 기능을 활용하는 방법에 대해 논의해 보겠습니다.

• 먼저 Angular의 기본 원리와 작동 원리를 이해해야 합니다.
• Angular 명령줄 인터페이스의 최신 버전을 설치해야 합니다.
• 시스템에 최신 Node JS 버전이 설치되어 있어야 합니다.

이제 템플릿의 배열을 사용하여 직원에 대한 정보를 표시하는 프로그램을 만들 것입니다. ngFor 지시문을 사용하여 직원 배열을 반복하고 각각에 대한 기본 정보를 표시했습니다.

또한 각 직원을 고유하게 식별하고 이를 ngFor 지시문에 할당해야 하는 trackBy 메서드도 만듭니다.

코드 조각 - app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  informations: { id: number; name: string; Age: string; }[];

  EmplyeesInfo(){
    this.informations = [
      { id:1, name:'Adil',  Age:' (Age 24)' },
      { id:2, name:'Steve' , Age:' (Age 30)'},
      { id:3, name:'John' ,Age:' (Age 27)'},
      { id:2, name:'Sofia' , Age:' (Age 23)' },
      { id:3, name:'Adam', Age: ' (Age 36)' }
    ];
  }
  trackEmployee(index: any,information: { id: any; }){
    return information ? information.id : undefined;
  }
}

코드 조각 - app.component.html:

<button (click)="EmplyeesInfo()">Employees Information</button>
<ul>
  <li *ngFor="let information of informations; trackBy: trackEmployee">
    {{ information.name }}
    {{ information.Age }}
  </li>
</ul>

출력:

코드 샘플의 라이브 데모를 확인하려면 여기를 클릭하십시오