Iterációs ciklusindexek az Angularban
A *ngFor és a @for
használatakor nem csak a tömb elemeit,
hanem azok sorszámát is el lehet kérni. Nézzük meg,
hogyan is történik ez. Tegyük fel, hogy a fő komponensben
van egy tömb:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
Jelenítsük meg mind az elemeit, mind a sorszámukat.
A *ngFor irányelv esetén ehhez
egy speciális trükköt alkalmazunk:
<ul>
<li *ngFor="let el of arr; let i = index">
{{ i }}
{{ el }}
</li>
</ul>
A @for szerkezet esetén pedig egyszerűen
használhatjuk ezt a változót a cikluson belül:
<ul>
@for (el of arr; track $index) {
<li>
{{ $index }}
{{ el }}
</li>
}
</ul>
Adott egy tömb:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
Jelenítse meg a sorszámokat, de úgy, hogy azok egyessel kezdődjenek, ne nullával.
