Angular-da for gurluşy

Massiw elementleriniň üstünden aýlamagy şeýle hem @for gurluşy arkaly işletmek mümkin.

Amaly işde synap göreli. Geliň, yene-de biziň komponentimizde massiw bardyr:

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

Gurluşyň sintaksisine serediň:

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

Aýlanýan massiw we elementleriň düşjek üýtgeýjisini görkezeliň:

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

Emma bu, henizem hemmesi däl. Angular-iň dogry işlemegi üçin biziň ýörite buýruk track görkezmeli. Ondan soň biz her bir massiw elementi üçin käbir takyklykly bahany görkezmeli. Bu, Angular-iň DOM bilen has gönümel işleýşi üçin zerur. Geliň, şeýle takyklykly baha hökmünde massiw elementiniň tertip belgisini alalyň. Bunuň üçin biz $index üýtgeýjisini görkezmeli. Şeýlelik bilen, bu biziň soňky kodymyz:

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