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

Выведите каждый элемент этого массива в отдельном абзаце.