엄격한 유형 검사를 사용하여 속성 지시문에 의한 Angular 전역 ngFor 추적.

데이터 목록(적어도 다소 큰 목록)을 표시할 때 다음과 같은 Angular의 trackBy 기능을 사용해야 합니다.

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

interface Item { 
  id: number; 
  name: string;
}

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let item of list; trackBy: trackById">
        {{ item.id }} {{ item.name }}
      </li>
    </ul>
  `,
})
export class AppListComponent {
  public list: Array<Item> = [
    { id: 0, name: 'foo' },
    { id: 1, name: 'bar' },
    { id: 2, name: 'baz' },
  ];

  public trackById(index: number, item: Item) {
    return item.id;
  }
}

불행히도 Angular는 trackBy를 사용하려는 각 구성 요소에 추적 기능을 작성하도록 강요합니다. ng-for-track-by-property를 사용하면 다음과 같은 속성을 전달하여 템플릿에서 이를 완전히 처리할 수 있습니다.

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

interface Item { 
  id: number; 
  name: string;
}

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let item of list; trackByProperty: 'id'">
        {{ item.id }} {{ item.name }}
      </li>
    </ul>
  `,
})
export class AppListComponent {
  public list: Array<Item> = [
    { id: 0, name: 'foo' },
    { id: 1, name: 'bar' },
    { id: 2, name: 'baz' },
  ];
}

ng-for-track-by-property 유형 검사가 엄격하고 사용 가능한 속성만 허용됩니다.

시작하다

1단계: 설치ng-for-track-by-property

npm i ng-for-track-by-property

2단계: 앱 모듈로 가져오기NgForTrackByPropertyModule, 예:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CommonModule } from '@angular/common';
import { NgForTrackByPropertyModule } from 'ng-for-track-by-property';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    CommonModule,
    NgForTrackByPropertyModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  ],
})
export class AppModule { }

3단계: trackByProperty를 ngFor에 추가합니다. 예:

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

interface Item { 
  id: number; 
  name: string;
}

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let item of list; trackByProperty: 'id'">
        {{ item.id }} {{ item.name }}
      </li>
    </ul>
  `,
})
export class AppComponent {
  public list: Array<Item> = [
    { id: 0, name: 'foo' },
    { id: 1, name: 'bar' },
    { id: 2, name: 'baz' },
  ];
}

trackByIndex 를 사용하여 인덱스로 추적할 수도 있습니다. 예:

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

interface Item { 
  id: number; 
  name: string;
}

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let item of list; trackByIndex">
        {{ item.id }} {{ item.name }}
      </li>
    </ul>
  `,
})
export class AppComponent {
  public list: Array<Item> = [
    { id: 0, name: 'foo' },
    { id: 1, name: 'bar' },
    { id: 2, name: 'baz' },
  ];
}

속성 ID로 추적하는 것은 매우 일반적인 경우이므로 trackById도 있습니다.

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

interface Item { 
  id: number; 
  name: string;
}

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let item of list; trackById">
        {{ item.id }} {{ item.name }}
      </li>
    </ul>
  `,
})
export class AppComponent {
  public list: Array<Item> = [
    { id: 0, name: 'foo' },
    { id: 1, name: 'bar' },
    { id: 2, name: 'baz' },
  ];
}

보다:

Stackblitz demo .

Github repository .

NPM package .