Angular'da for Yapısı

Dizi elemanları üzerinde döngü, @for yapısı kullanılarak da çalıştırılabilir.

Pratikte deneyelim. Yine bileşenimizde bir dizi olduğunu varsayalım:

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

Yapının sözdizimini inceleyelim:

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

Üzerinde döngü yapılacak diziyi ve elemanların atanacağı değişkeni belirtelim:

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

Ancak bu henüz bitmedi. Angular'ın doğru çalışması için özel bir track komutu belirtmeliyiz. Ondan sonra, her dizi elemanı için bir tane benzersiz bir değer belirtmeliyiz. Bu, Angular'ın DOM ile daha optimize bir şekilde çalışabilmesi için gereklidir. Bu benzersiz değer olarak dizi elemanının numarasını kullanalım. Bunun için $index değişkenini belirtmeliyiz. İşte, son kodumuz:

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