Директива for в Angular
Пусть у нас есть массив:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
Давайте переберем этот массив циклом в
файле темплейта. Для этого предназначена
директива *ngFor
. Она может перебрать
массив и вывести каждый его элемент в
отдельном теге.
Для начала эту директиву нужно импортировать:
import {NgFor} from "@angular/common";
И добавить ее в раздел импортов в декораторе:
@Component({
.....
imports: [....., NgFor],
....
})
Теперь можно ей пользоваться. Давайте
посмотрим, как это делается. Пусть у нас
есть список ul
:
<ul>
</ul>
Сделаем так, чтобы наш массив перебрался
в цикле и его каждый элемент вывелся в
тегах li
. Это делается следующим
образом:
<ul>
<li *ngFor="let el of arr">
{{ el }}
</li>
</ul>
Дан массив:
export class AppComponent {
public arr: number[] = [1, 2, 3, 4, 5];
}
Выведите каждый элемент этого массива в отдельном абзаце.
Модифицируйте предыдущую задачу так, чтобы в абзацы выводились квадраты элементов нашего массива.