Indecșii iterațiilor ciclurilor în Angular
Când iterăm cu *ngFor și @for
putem obține nu doar elementele array-ului,
ci și numerele lor. Să vedem cum se face
asta. Să presupunem că în componenta principală
avem un array:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
Să afișăm atât elementele sale, cât și numerele lor.
Pentru directiva *ngFor pentru aceasta
se folosește o metodă specială:
<ul>
<li *ngFor="let el of arr; let i = index">
{{ i }}
{{ el }}
</li>
</ul>
Iar pentru construcția @for putem pur și simplu
folosi această variabilă în interiorul
ciclului:
<ul>
@for (el of arr; track $index) {
<li>
{{ $index }}
{{ el }}
</li>
}
</ul>
Este dat array-ul:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
Afișați numerele lui, dar astfel încât acestea să înceapă de la unu, nu de la zero.