Директива 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];
}
Выведите каждый элемент этого массива в отдельном абзаце.
Модифицируйте предыдущую задачу так, чтобы в абзацы выводились квадраты элементов нашего массива.