For-rakenteen käyttö Angularissa

Taulukon elementeihin voi iteroida myös käyttämällä @for-rakennetta.

Kokeillaan käytännössä. Oletetaan, että komponentissamme on jälleen taulukko:

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

Tarkastellaan rakenteen syntaksia:

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

Määritetään iterointitaulukko ja muuttuja, johon alkiot asetetaan:

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

Tämä ei kuitenkaan ole vielä kaikki. Angularin oikein toimimiseksi meidän on määritettävä erityinen track-komento. Sen jälkeen meidän on määritettävä jokin yksilöllinen arvo jokaiselle taulukon elementille. Tämä on tarpeen, jotta Angular voi käsitellä DOM:ia optimaalisemmin. Otetaan tällaiseksi yksilölliseksi arvoksi taulukon elementin indeksi. Tätä varten meidän on määritettävä muuttuja $index. Joten tässä on lopullinen koodimme:

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