Гид по технологиям

ngFor в Angular: как использовать, примеры и лучшие практики

• 5 min read • Angular • Обновлено 09 Jan 2026
ngFor в Angular: примеры и лучшие практики
ngFor в Angular: примеры и лучшие практики

TL;DR

ngFor — структурная директива Angular для динамического повторения блоков HTML. В статье показаны примеры перебора фиксированного числа, массивов и объектов, вложенные циклы, стилизация по индексам, обратный порядок и способы оптимизации, включая trackBy и форматирование дат.

Вид сзади человека за компьютером, на экране которого виден исходный код.

Что делает ngFor и когда его использовать

ngFor позволяет повторять один и тот же кусок шаблона несколько раз, перебирая массив или виртуально создавая последовательность чисел. Это структурная директива, то есть она добавляет или удаляет элементы DOM в зависимости от входных данных.

Короткое определение: ngFor — директива для повторного вывода шаблона по коллекции или по заданному числу элементов.

В этой статье вы найдёте практические приёмы, советы по производительности и контрольные списки для разработки и тестирования.

Основные возможности ngFor

  • Перебор массива и объектов
  • Вложенные циклы для массивов внутри объектов
  • Специальные переменные индекса: index, first, last, even, odd
  • Оптимизация через trackBy
  • Совмещение с другими директивами: ngIf, ngClass, ngStyle

Как использовать ngFor для перебора статических чисел

ngFor по сути похож на цикл for в JavaScript. Если нужно повторить HTML N раз, можно создать массив длиной N и перебрать его.

Пример 1 — создать список прямо в шаблоне и повторить параграф 5 раз:


  
Это повторяющийся параграф: {{item}}

Пример 2 — динамически создать массив в TypeScript для большого числа элементов:

export class ExampleClass implements OnInit {
  numbers: Array = [];
  constructor() {
    // создаём массив [0,1,2,3,4,5,6,7,8,9]
    this.numbers = Array(10).fill(1).map((x,i)=>i);
  }
}

И использовать его в шаблоне:


  
Это повторяющийся параграф: {{item}}

Вывод цикла for при переборе статических чисел

Пропуск или стилизация определённых элементов

Angular предоставляет булевы вспомогательные переменные odd и even, которые помогают чередовать стили или условно рендерить элементы.

CSS классы для примера:

.red {
  color: red;
}
.blue {
  color: blue;
}

Применение odd/even в шаблоне:


  
Это повторяющийся параграф: {{item}}

Чтобы полностью пропускать элементы с нечётными или чётными индексами, комбинируйте ngFor с ngIf:


  
Это повторяющийся параграф: {{item}}

HTML параграфы: нечётные синие, чётные красные

Отображаются только чётные элементы HTML

Обратный порядок перебора

Есть два подхода:

  1. Вычислять обратный индекс на лету с помощью переменной index:

  
Это повторяющийся параграф: {{numbers.length - i - 1}}
  1. Создать обратную копию массива в компоненте и перебирать её:
export class ExampleClass implements OnInit {
  numbers: Array = [];
  reversedList: Array = [];
  constructor() {
    this.numbers = Array(10).fill(1).map((x,i)=>i);
    this.reversedList = this.numbers.slice().reverse();
  }
}

  
Это повторяющийся параграф: {{item}}

Список HTML элементов в обратном порядке

Стилизация первого и последнего элемента

Переменные first и last позволяют отличать первый и последний элемент от остальных и назначать им специальные классы:


  
Это повторяющийся параграф: {{item}}

Список с различной стилизацией первого и последнего элемента

Перебор объектов

ngFor отлично подходит для вывода списков объектов. Пример списка людей в компоненте:

export class ExampleClass implements OnInit {
  people = [];
  constructor() {
    this.people = [
      { firstName: 'John', lastName: 'Smith', occupation: 'HR Manager', startDate: new Date('2019-02-05') },
      { firstName: 'Mary', lastName: 'Johnson', occupation: 'Technical Officer', startDate: new Date('2016-01-07') },
      { firstName: 'William', lastName: 'Brown', occupation: 'HR Officer', startDate: new Date('2018-03-03') },
    ];
  }
}

Шаблон для вывода атрибутов объекта. Рекомендация: форматируйте даты через пайп date и указывайте локаль, если нужно:


  
{{person.firstName}} {{person.lastName}}

  
{{person.occupation}}

  
{{person.startDate | date:'longDate':'':'ru'}}

Веб‑страница, отображающая данные нескольких людей

Вложенные ngFor для объектов внутри объектов

Если у объекта есть массив внутри, используйте вложенный ngFor для перебора вложенных элементов.

Пример: у каждого человека есть список экстренных контактов.

this.people = [
  {
    firstName: 'John',
    lastName: 'Smith',
    emergencyContacts: [
      { name: 'Amanda Smith', relationship: 'Wife', phone: '0441239876' },
      { name: 'Barry Smith', relationship: 'Son', phone: '0442239876'}
    ]
  },
  {
    firstName: 'Mary',
    lastName: 'Johnson',
    emergencyContacts: [
      { name: 'Mark Johnson', relationship: 'Husband', phone: '0443239876' }
    ]
  },
];

Шаблон с вложенным циклом:


  
{{person.firstName}} {{person.lastName}}

  

    
Экстренные контакты:

    
{{contact.name}}

    
{{contact.relationship}}

    
{{contact.phone}}

Сайт с указанием людей и их экстренных контактов

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

При рендере длинных списков Angular по умолчанию использует алгоритм сопоставления элементов по порядку, что может приводить к лишним перерасчётам и повторным DOM-операциям. Предоставьте функцию trackBy, чтобы Angular мог отличать элементы по уникальному ключу.

Пример trackBy по id:

trackById(index: number, item: any) {
  return item.id; // либо другой уникальный идентификатор
}

В шаблоне:

Когда использовать trackBy: всегда, когда список меняется динамически и у элементов есть стабильный уникальный ключ.

Форматирование и локализация дат

При выводе дат используйте Angular DatePipe и указание локали, чтобы дата отображалась в привычном формате для пользователей. Пример выше показывает формирование даты в русской локали через пайп date с форматом ‘longDate’.

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

Когда ngFor не подходит — контрпримеры

  • Если вы хотите управлять виртуализированным списком с тысячами элементов, лучше использовать CDK Virtual Scroll для производительности.
  • Если данные стримятся по одному элементу и нужно «ленивое» добавление, подумайте о сочетании Observables + async pipe, а также о стратегиях изменения обнаружения (OnPush).
  • Для простого статического контента без привязки к данным лучше использовать статическую разметку.

Безопасность и приватность

Если вы выводите персональные данные (контакты, даты рождения и т. п.), следите за правовыми требованиями и минимизируйте утечку чувствительной информации. Для сайтов, ориентированных на пользователей из ЕС, проверьте соответствие GDPR в части хранения и отображения личных данных.

Роль‑ориентированные чеклисты

  • Для разработчика:
    • Использовать trackBy для динамических списков
    • Форматировать даты через пайпы и указывать локаль
    • Не выводить чувствительные данные без проверки прав
  • Для тестировщика:
    • Проверить отображение first/last/odd/even
    • Проверить корректность вложенных циклов
    • Тестировать производительность при больших массивах
  • Для дизайнера:
    • Обеспечить читаемость ряда при чередовании цветов
    • Проверить доступность контрастов и фокусируемость
  • Для менеджера продукта:
    • Убедиться, что UX для списков соответствует требованиям и содержит пагинацию при необходимости

Критерии приёмки

  • Список корректно отображается для N элементов
  • Чередование стилей odd/even соответствует дизайну
  • Первый и последний элементы имеют отдельную стилизацию
  • Вложенные контакты отображаются под соответствующим пользователем
  • Производительность не деградирует при росте массива (проверка на 1000+ элементов)

Мини‑методология внедрения ngFor в проекте

  1. Спланировать структуру данных и определить уникальные идентификаторы.
  2. Реализовать компонент и подготовить тестовые данные.
  3. Добавить шаблон с ngFor и trackBy.
  4. Оформить стили через ngClass/псевдоклассы.
  5. Провести юнит и e2e тесты, включая сценарии с пустым списком.
  6. Профилировать производительность при реальных объёмах данных.

Частые ошибки и ловушки

  • Пренебрежение trackBy приводит к лишним пересозданиям DOM
  • Использование сложных вычислений прямо в шаблоне замедляет рендер
  • Неправильный формат дат без локализации вводит пользователей в заблуждение
  • Перечисление большого статического массива прямо в шаблоне усложняет поддержку

Короткий глоссарий

  • ngFor — директива для повторного вывода шаблона по коллекции
  • trackBy — функция для оптимизации сопоставления элементов
  • first/last/index/even/odd — вспомогательные переменные ngFor

Итог

ngFor — базовый и мощный инструмент для рендеринга списков в Angular. Правильное применение trackBy, форматирование дат и аккуратная работа с вложенными структурами помогут сделать интерфейс быстрым, доступным и удобным для пользователей.

Важно: при работе с личными данными соблюдайте требования безопасности и приватности.

Поделиться: X/Twitter Facebook LinkedIn Telegram
Автор
Редакция

Похожие материалы

RDP: полный гид по настройке и безопасности
Инфраструктура

RDP: полный гид по настройке и безопасности

Android как клавиатура и трекпад для Windows
Гайды

Android как клавиатура и трекпад для Windows

Советы и приёмы для работы с PDF
Документы

Советы и приёмы для работы с PDF

Calibration в Lightroom Classic: как и когда использовать
Фото

Calibration в Lightroom Classic: как и когда использовать

Отключить Siri Suggestions на iPhone
iOS

Отключить Siri Suggestions на iPhone

Рисование таблиц в Microsoft Word — руководство
Office

Рисование таблиц в Microsoft Word — руководство