Iterations indeks for loops i Angular

Ved gennemløb med *ngFor og @for kan man få ikke kun elementerne i arrayet, men også deres numre. Lad os se, hvordan dette gøres. Lad os sige, at vi har et array i hovedkomponenten:

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

Lad os udskrive både dens elementer og numre.

For direktivet *ngFor bruges en speciel smart tilgang til dette:

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

Og for konstruktionen @for kan man bare tage og bruge denne variabel inde i loopet:

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