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 :

app/app.component.tsexport 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 :

app/app.component.html<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 :

app/app.component.html<ul>
  @for (el of arr; track $index) {
    <li>
      {{ $index }}
      {{ el }}
    </li>
  }
</ul>

app/app.component.tsexport class AppComponent {
  public arr: string[] = ['a', 'b', 'c', 'd'];
}