Angularin silmukkien iteraatioindeksit
Kun iteroidaan läpi *ngFor:lla ja @for:lla,
voidaan saada paitsi taulukon elementit,
myös niiden numerot. Katsotaan kuinka tämä
tehdään. Oletetaan, että pääkomponentissamme
on taulukko:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
Esitetään sekä sen elementit että niiden numerot.
*ngFor-direktiiville tämä
tehdään erikoisella tempulla:
<ul>
<li *ngFor="let el of arr; let i = index">
{{ i }}
{{ el }}
</li>
</ul>
Ja @for-rakenteella voi vain
käyttää tätä muuttujaa silmukan sisällä:
<ul>
@for (el of arr; track $index) {
<li>
{{ $index }}
{{ el }}
</li>
}
</ul>
Annettu taulukko:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
Esitä sen numerot, mutta niin, että ne alkavat ykkösestä, eivätkä nollasta.
