Indeks Iterasi Perulangan di Angular
Saat melakukan iterasi melalui *ngFor dan @for,
kita bisa mendapatkan tidak hanya elemen array,
tetapi juga nomor indeksnya. Mari kita lihat cara
melakukannya. Misalkan kita memiliki array di komponen utama:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
Mari kita tampilkan baik elemen-elemennya maupun nomor indeksnya.
Untuk direktif *ngFor, hal ini dilakukan
dengan trik khusus:
<ul>
<li *ngFor="let el of arr; let i = index">
{{ i }}
{{ el }}
</li>
</ul>
Sedangkan untuk konstruksi @for, kita bisa langsung
menggunakan variabel ini di dalam perulangan:
<ul>
@for (el of arr; track $index) {
<li>
{{ $index }}
{{ el }}
</li>
}
</ul>
Diberikan array:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
Tampilkan nomor indeksnya, tetapi mulai dari satu, bukan dari nol.
