Constructia for în Angular

Ciclul prin elementele unui array poate fi, de asemenea, pornit folosind construcția @for.

Să încercăm în practică. Să presupunem că în componenta noastră există din nou un array:

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

Să analizăm sintaxa construcției:

app/app.component.html@for () {
  tag-uri
}

Să specificăm array-ul care va fi iterat și variabila în care vor fi plasate elementele:

app/app.component.html@for (elem of arr) {
  tag-uri
}

Cu toate acestea, asta nu este tot. Pentru o funcționare corectă a Angular, trebuie să specificăm comanda specială track. După aceasta, trebuie să indicăm o valoare unică pentru fiecare element al array-ului. Acest lucru este necesar pentru ca Angular să poată lucra mai optim cu DOM-ul. Să luăm ca astfel de valoare unică numărul elementului din array. Pentru aceasta, trebuie să specificăm variabila $index. Deci, iată codul nostru final:

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