Indeksy iteracji pętli w Angular
Podczas iteracji za pomocą *ngFor i @for
można uzyskać nie tylko elementy tablicy,
ale także ich numery. Spójrzmy, jak to się
robi. Załóżmy, że w komponencie głównym
znajduje się tablica:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
Wyświetlmy zarówno jej elementy, jak i numery.
Dla dyrektywy *ngFor używa się do tego
specjalnej, sprytnej sztuczki:
<ul>
<li *ngFor="let el of arr; let i = index">
{{ i }}
{{ el }}
</li>
</ul>
A dla konstrukcji @for można po prostu
użyć tej zmiennej wewnątrz
pętli:
<ul>
@for (el of arr; track $index) {
<li>
{{ $index }}
{{ el }}
</li>
}
</ul>
Dana jest tablica:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
Wyświetl jej numery, ale tak, aby zaczynały się od jedynki, a nie od zera.
