Struktura for në Angular

Loop përmes elementeve të vargut gjithashtu mund të niset me ndihmën e strukturës @for.

Le ta provojmë në praktikë. Le të themi përsëri se në komponentin tonë ekziston një varg:

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

Le të shqyrtojmë sintaksën e strukturës:

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

Le të përcaktojmë vargun që do të përsëritet dhe variablën ku do të vendosen elementët:

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

Megjithatë, kjo nuk është ende e gjitha. For funksionimit korrekt të Angular, ne duhet të përcaktojmë një komandë të veçantë track. Pas saj duhet të përcaktojmë një vlerë unike për çdo element të vargut. Kjo është e nevojshme që Angular të jetë në gjendje të punojë në mënyrë më optimale me DOM. Le të marrim numrin e elementit të vargut si një vlerë të tillë unike. Për këtë duhet të përcaktojmë variablën $index. Pra, këtu është kodi ynë përfundimtar:

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