Indices d'itération des boucles dans Angular
Lors de l'itération avec *ngFor et @for,
il est possible d'obtenir non seulement les éléments du tableau,
mais aussi leurs numéros. Voyons comment cela
se fait. Supposons que nous ayons un tableau dans le composant principal :
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
Affichons à la fois ses éléments et leurs numéros.
Pour la directive *ngFor, une astuce
spéciale est utilisée pour cela :
<ul>
<li *ngFor="let el of arr; let i = index">
{{ i }}
{{ el }}
</li>
</ul>
Et pour la construction @for, on peut simplement
utiliser cette variable à l'intérieur
de la boucle :
<ul>
@for (el of arr; track $index) {
<li>
{{ $index }}
{{ el }}
</li>
}
</ul>
Étant donné le tableau :
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
Affichez ses numéros, mais de manière à ce qu'ils commencent à un, et non à zéro.
