Конструкция 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];
}