* Директива ngFor в Angular

NgFor — это встроенная директива шаблона, которая позволяет легко перебирать что-то вроде массива или объекта и создавать шаблон для каждого элемента.

Этот пост охватывает Angular 2 и выше.

Вот базовый пример его использования:

<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>

• позволить пользователю создать локальную переменную, которая будет доступна в шаблоне.
• пользователей означает, что мы будем перебирать пользователей, которые должны быть доступны в нашем компоненте.
• Символ * перед тем, как ngFor создаст родительский шаблон. Это ярлык для следующего синтаксиса: template=\ngFor let item of items.

Доступные локальные переменные

Вы также можете установить локальные переменные для следующих экспортируемых значений: индекс, первый, последний, четный и странно. index возвращает текущий индекс цикла, а другие значения предоставляют логическое значение, указывающее, является ли значение истинным или ложным. Например:

<ul>
  <li *ngFor="let user of users; let i = index; let odd = odd"
      [class.odd]="odd">
    {{i + 1}}. {{ user.name }}
  </li>
</ul>

Произведет следующую разметку:

<ul>
  <li>1. Al Dente</li>
  <li class="odd">2. D. Liver</li>
  <li>3. Pepe Roni</li>
</ul>

Смотрите также

• *ngIf
• ngSwitch