For-konstruksjonen i Angular

Loop gjennom elementene i en array kan også kjøres ved hjelp av konstruksjonen @for.

La oss prøve i praksis. La oss igjen si at i vår komponent finnes en array:

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

La oss se på syntaksen til konstruksjonen:

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

La oss spesifisere arrayen som skal itereres over og variabelen som elementene skal plasseres i:

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

Dette er imidlertid ikke alt. For at Angular skal fungere korrekt må vi spesifisere en spesiell kommando track. Etter denne må vi spesifisere en unik verdi for hvert element i arrayen. Dette er nødvendig for at Angular skal kunne arbeide mer optimalt med DOM. La oss bruke indeksen til elementet i arrayen som en slik unik verdi. For å gjøre dette må vi spesifisere variabelen $index. Så, her er vår 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];
}