Angular-da for konstruksiyası

Massiv elementləri üzrə dövrü @for konstruksiyası ilə də işə sala bilərsiniz.

Gəlin praktikada sınayaq. Tutaq ki, bizim komponentimizdə yenə massiv var:

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

Konstruksiyanın sintaksisinə baxaq:

app/app.component.html@for () {
  teqlər
}

Gəlin üzərindən keçiləcək massivi və elementlərin daxil olacağı dəyişəni göstərək:

app/app.component.html@for (elem of arr) {
  teqlər
}

Ancaq bu, hələlik hamısı deyil. Angular-in düzgün işləməsi üçün biz xüsusi track əmrini göstərməliyik. Ondan sonra biz hər bir massiv elementi üçün birtəhər unikal dəyər göstərməliyik. Bu, Angular-in DOM ilə daha optimal işləyə bilməsi üçün lazımdır. Gəlin belə unikal dəyər kimi massiv elementinin nömrəsini götürək. Bunun üçün biz $index dəyişənini göstərməliyik. Beləliklə, burada bizim yekun kodumuzdur:

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