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

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.

class Employee {
    id !: number;
    name !: string;
    city !: string;
    salary !: number;
}

Legyen egy list:

employees: Employee[] = [];

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

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

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>
}