Iteratie-indexen van loops in Angular

Bij het itereren met *ngFor en @for kun je niet alleen de elementen van de array krijgen, maar ook hun indexen. Laten we kijken hoe dit gedaan wordt. Stel dat we in de hoofdcomponent een array hebben:

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

Laten we zowel zijn elementen als indexen weergeven.

Voor de directive *ngFor wordt hiervoor een speciale slimme truc gebruikt:

app/app.component.html<ul>
  <li *ngFor="let el of arr; let i = index">
    {{ i }}
    {{ el }}
  </li>
</ul>

En voor de constructie @for kun je simpelweg deze variabele binnen de loop gebruiken:

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'];
}