Конструкция for в Angular
Цикл по элементам массива можно
также запустить с помощью конструкции
@for.
Попробуем на практике. Пусть опять в нашем компоненте есть массив:
export class AppComponent {
public arr: number[] = [1, 2, 3, 4, 5];
}
Рассмотрим синтаксис конструкции:
@for () {
теги
}
Укажем перебираемый массив и переменную, в которую будут попадать элементы:
@for (elem of arr) {
теги
}
Это, однако, еще не все. Для корректной
работы Angular мы должны указать специальную
команду track. После нее мы должны
указать некое уникальное значение для
каждого элемента массива. Это нужно,
для того, чтобы Angular мог более оптимально
работать с DOM. Давайте в качестве такого
уникального значения возьмем номер элемента
массива. Для этого мы должны указать переменную $index.
Итак, вот наш окончательный код:
@for (elem of arr; track $index) {
<div>
{{ elem }}
</div>
}
Дан массив:
export class AppComponent {
public arr: numbers[] = [1, 2, 3, 4, 5];
}
Выведите каждый элемент этого массива в отдельном абзаце.