For-konstruktionen i Angular

Loopa genom element i en array kan också aktiveras med konstruktionen @for.

Låt oss prova i praktiken. Låt oss återigen anta att det i vår komponent finns en array:

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

Låt oss titta på konstruktionens syntax:

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

Låt oss ange arrayen som ska itereras över och variabeln som elementen ska tilldelas till:

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

Detta är dock inte allt. För korrekt fungerande av Angular måste vi ange en speciell kommando track. Efter det måste vi ange ett unikt värde för varje element i arrayen. Detta behövs för att Angular ska kunna arbeta mer optimalt med DOM. Låt oss ta arrayelementets index som ett sådant unikt värde. För att göra detta måste vi ange variabeln $index. Så, här är vår slutliga kod:

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