NgFor это встроенная директива, которая облегчает итерацию маcсива или объекта и создать шаблон для каждого элемента.
Ниже приведен пример использования:
<ul> <li *ngFor="let user of users">{{ user.name }}</li> </ul>
В результате будет сгенерирован HTML код:
<ul> <li>Al Dente</li> <li>D. Liver</li> <li>Pepe Roni</li> </ul>
- let user создает локальную переменную, которая будет доступна в шаблоне.
- of users значит что будет итерироваться переменная users, которая должна быть задана в компоненте.
- Символ * перед ngFor создает родительский шаблон. Это более короткая версия полного синтаксиса template=”ngFor let item of items”
Локальные переменные
Также возможно инициализировать такие переменные: index, first, last, even и odd. index возвращает индекс текущего элемента масива. Другие принимают значение true или false в зависимости, является ли элемент первым, последним, индекс парным или непарным.
<ul> <li *ngFor="let user of users; let i = index; let odd = odd" [class.odd]="odd"> {{i + 1}}. {{ user.name }} </li> </ul>
В результате будет сгенерирован HTML код:
<ul> <li>1. Al Dente</li> <li class="odd">2. D. Liver</li> <li>3. Pepe Roni</li> </ul>