For-konstruktion i Angular

Loop gennem elementer i et array kan også køres ved hjælp af konstruktionen @for.

Lad os prøve det i praksis. Antag, at der igen i vores komponent er et array:

app/app.component.tsexport class AppComponent {
  public arr: number[] = [1, 2, 3, 4, 5];
}

Lad os se på syntaksen for konstruktionen:

app/app.component.html@for () {
  tags
}

Lad os angive arrayet, der skal itereres over, og variablen, som elementerne vil blive placeret i:

app/app.component.html@for (elem of arr) {
  tags
}

Dette er dog ikke alt. For at Angular skal fungere korrekt skal vi angive en speciel kommando track. Efter den skal vi angive en unik værdi for hvert element i arrayet. Dette er nødvendigt, så Angular kan arbejde mere optimalt med DOM. Lad os som en sådan unik værdi tage elementets indeks i arrayet. For at gøre dette skal vi angive variablen $index. Så, her er vores endelige kode:

app/app.component.html@for (elem of arr; track $index) {
  <div>
    {{ elem }}
  </div>
}

app/app.component.tsexport class AppComponent {
  public arr: numbers[] = [1, 2, 3, 4, 5];
}