Indici delle iterazioni dei cicli in Angular
Quando si iterano elementi con *ngFor e @for
è possibile ottenere non solo gli elementi dell'array,
ma anche i loro indici. Vediamo come si fa.
Supponiamo di avere un array nel componente principale:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
Visualizziamo sia i suoi elementi che i loro indici.
Per la direttiva *ngFor, a questo scopo
si utilizza un trucco speciale:
<ul>
<li *ngFor="let el of arr; let i = index">
{{ i }}
{{ el }}
</li>
</ul>
Mentre per il costrutto @for si può semplicemente
utilizzare questa variabile all'interno
del ciclo:
<ul>
@for (el of arr; track $index) {
<li>
{{ $index }}
{{ el }}
</li>
}
</ul>
Dato l'array:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
Visualizza i suoi indici, ma in modo che inizino da uno, non da zero.
