Какая директива используется для вывода списков в View?

Директивы для вывода списков в Angular Views

В Angular для вывода списков в шаблонах (View) используется директива *ngFor. Это одна из встроенных структурных директив, которая преобразует DOM, повторяя заданный шаблон для каждого элемента в коллекции.

Основы использования *ngFor

Директива имеет следующий синтаксис:

<element *ngFor="let item of items; index as i; trackBy: trackById">
  {{ i }}: {{ item.name }}
</element>

Разберем ключевые части:

• let item of items: Объявляет локальную переменную шаблона item, которая получает значение текущего элемента на каждой итерации. items — это массив или итерируемый объект из компонента.
• index as i (или let i = index): Необязательная локальная переменная, содержащая индекс текущего элемента (начинается с 0).
• trackBy: trackById: Функция trackBy — критически важный оптимизационный механизм, который мы рассмотрим ниже.

Пример вывода массива объектов

// Компонент (component.ts)
export class UserListComponent {
  users = [
    { id: 1, name: 'Анна' },
    { id: 2, name: 'Иван' },
    { id: 3, name: 'Мария' }
  ];
}

<!-- Шаблон (component.html) -->
<ul>
  <li *ngFor="let user of users">
    {{ user.name }} (ID: {{ user.id }})
  </li>
</ul>
<!-- Результат рендеринга:
  <ul>
    <li>Анна (ID: 1)</li>
    <li>Иван (ID: 2)</li>
    <li>Мария (ID: 3)</li>
  </ul>
-->

Доступные локальные переменные внутри *ngFor

Помимо index, директива предоставляет несколько других полезных контекстных переменных:

<div *ngFor="let item of items; let i = index; let isFirst = first; let isLast = last; let isEven = even; let isOdd = odd">
  <p>Элемент: {{ item }}</p>
  <p>Индекс: {{ i }}, Первый: {{ isFirst }}, Последний: {{ isLast }}</p>
  <p [class.highlight]="isEven">Четный: {{ isEven }}</p>
</div>

Оптимизация производительности с помощью trackBy

Без использования trackBy Angular по умолчанию использует объектную идентичность (===) для отслеживания изменений в коллекции. При изменении массива (даже если данные те же, но массив пересоздан) Angular не может сопоставить старые и новые элементы и полностью перерисовывает все узлы DOM. Это приводит к серьезным проблемам с производительностью при больших списках или частых обновлениях.

Функция trackBy позволяет Angular однозначно идентифицировать каждый элемент по уникальному ключу (например, id). При обновлении коллекции Angular сверяет ключи и повторно использует существующие узлы DOM для неизмененных элементов, выполняя лишь минимальные необходимые обновления.

// Компонент
export class UserListComponent {
  users = [ ... ]; // Массив пользователей с полем id

  // Функция trackBy
  trackByUserId(index: number, user: any): number {
    return user.id; // Уникальный идентификатор
  }
}

<!-- Шаблон с trackBy -->
<ul>
  <li *ngFor="let user of users; trackBy: trackByUserId">
    {{ user.name }}
  </li>
</ul>

Почему это важно: Представьте список из 1000 элементов. При получении обновленных данных с сервера (новый массив объектов с теми же id, но другими ссылками в памяти) без trackBy Angular уничтожит и заново создаст 1000 DOM-узлов. С trackBy — он сопоставит элементы по id и обновит только те, чье содержимое изменилось (например, имя пользователя), что в разы эффективнее.

Альтернативы и сравнение

• *ngFor — основной инструмент для рендеринга динамических списков, когда структура элементов известна заранее.
• *ngIf и *ngSwitch — другие структурные директивы для условного отображения, но не для перебора коллекций.
• Ручной перебор через @for (новый синтаксис в Angular v17+) — более современная, производительная и лаконичная альтернатива, которая постепенно приходит на смену *ngFor. Он автоматически имеет лучшую оптимизацию и не требует отдельной функции trackBy в простых случаях.

Итог: Для вывода списков в Angular View стандартно используется директива *ngFor. Ее грамотное применение, особенно с функцией trackBy, является обязательным знанием для Frontend-разработчика, так как напрямую влияет на скорость отклика интерфейса и пользовательский опыт в реальных приложениях.