Канструкцыя for у Angular

Цыкл па элементах масіва можна таксама запусціць з дапамогай канструкцыі @for.

Паспрабуем на практыцы. Хай зноў у нашым кампаненце ёсць масіў:

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

Разгледзім сінтаксіс канструкцыі:

app/app.component.html@for () {
  тэгі
}

Пакажам перабіраемы масіў і зменную, у якую будуць трапляць элементы:

app/app.component.html@for (elem of arr) {
  тэгі
}

Гэта, аднак, яшчэ не ўсё. Для карэктнай працы Angular мы павінны паказаць спецыяльную каманду track. Пасля яе мы павінны паказаць некае ўнікальнае значэнне для кожнага элемента масіва. Гэта трэба, для таго, каб Angular мог больш аптымальна працаваць з DOM. Давайце ў якасці такога ўнікальнага значэння возьмем нумар элемента масіва. Для гэтага мы павінны паказаць зменную $index. Такім чынам, вось наш канчатковы код:

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