Iterasie-indekse van lusse in Angular
Tydens deurloop met *ngFor en @for
kan jy nie net die elemente van die array kry nie,
maar ook hul nommers. Kom ons kyk hoe dit
gedoen word. Laat ons sê ons het 'n array in die hoofkomponent:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
Kom ons vertoon beide sy elemente en hul nommers.
Vir die *ngFor-direktief word
'n spesiale truuk hiervoor gebruik:
<ul>
<li *ngFor="let el of arr; let i = index">
{{ i }}
{{ el }}
</li>
</ul>
En vir die @for-konstruksie kan jy eenvoudig
hierdie veranderlike binne die lus gebruik:
<ul>
@for (el of arr; track $index) {
<li>
{{ $index }}
{{ el }}
</li>
}
</ul>
Gegewe die array:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
Vertoon sy nommers, maar so dat hulle met een begin, en nie met nul nie.
