< Angular

Angular - TrackByFunction

Szerző: Sallai András

Copyright © 2023, Sallai András

Szerkesztve: 2023, 2025

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

NgForOf azonosítója

Az NgForOf direktava helyett a @for() szintaxis ajánlott az Angular 16 utáni változatokban, de használható ez a direktíva is.

A TrackByFunction, az NgForOf direktíva használatakor segít az egyedi azonosító használatában a DOM változtatása során.

Célja, hogy csak a DOM-nak csak azokat a részeit változtassuk, ami az adott tömbben vagy listában is változik.

Ez Angular új @for() szintaxis használata esetén nem szükséges ez a függvény, mivel a kötelező track kulccsal ez automatikus.

Model

class Employee { id: number; name: string; city: string; salary: number; }
employees !: Employees[];

NgForOf direktíva

TrackBy függvény

function employeeTrackBy(index, employee) { return employee.id; }

Használat

<tr *ngFor="let emp of employees; trackBy:employeeTrackBy"> <td>{{ emp.name }}</td> <td>{{ emp.city }}</td> <td>{{ emp.salary }}</td> </tr>

Az Angular @for() szintaxisa

A @for() szintaxis használata esetén nem szükséges külön megírni a trackBy() függvényt, mivel automatikusan működik.

@for(emp of employees; track emp.id) { <tr> <td>{{ emp.name }}</td> <td>{{ emp.city }}</td> <td>{{ emp.salary }}</td> </tr> }