NgFor

Stable Directive

Обзор класса

class NgFor implements DoCheck,  OnChanges {
  constructor(_viewContainer: ViewContainerRef, _template: TemplateRef<NgForRow>, _differs: IterableDiffers, _cdr: ChangeDetectorRef)
  
  
  ngForOf : any
  ngForTrackBy 
  ngForTemplate 
  ngOnChanges(changes: SimpleChanges) : void
  ngDoCheck() : void
}

Селекторы

[ngFor][ngForOf]

Описание класса

Директива NgFor создаёт шаблон один раз для каждого элемента из итерируемого объекта. Контекст каждого созданного шаблона наследуется от внешнего контекста с заданной переменной цикла, установленной на текущий элемент из итерируемого объекта.

Локальные переменные

NgFor предоставляет несколько экспортированных значений, которые можно использовать в качестве локальных переменных:

• index будет установлена на текущую итерацию цикла для каждого контекста шаблона.
• first будет установлена на булево значение, указывающее, является ли элемент первым в итерации.
• last будет установлена на булево значение, указывающее, является ли элемент последним в итерации.
• even будет установлена на булево значение, указывающее, имеет ли этот элемент чётный индекс.
• odd будет установлена на булево значение, указывающее, имеет ли этот элемент нечётный индекс.

Распространение изменений

Когда содержимое итератора изменяется, NgFor вносит соответствующие изменения в DOM:

• При добавлении элемента в DOM добавляется новый экземпляр шаблона.
• При удалении элемента из DOM удаляется его экземпляр шаблона.
• При изменении порядка элементов их соответствующие шаблоны изменяют порядок в DOM.
• В противном случае, элемент DOM для данного элемента останется неизменным.

Angular использует идентичность объектов для отслеживания вставок и удалений в итераторе и воспроизведения этих изменений в DOM. Это имеет важное значение для анимаций и любых состоятельных элементов управления (таких как элементы <input> , принимающие пользовательский ввод), которые присутствуют. Вставленные строки можно анимировать, удалённые строки можно анимировать, а неизменённые строки сохраняют любое несохранённое состояние, например, пользовательский ввод.

Возможны изменения идентичности элементов в итераторе, при этом данные не изменяются. Это может произойти, например, если итератор получен в результате вызова RPC на сервер, и этот вызов повторно выполняется. Даже если данные не изменились, второй ответ будет содержать объекты с другими идентификаторами, и Angular полностью разрушит DOM и перестроит его (как если бы все старые элементы были удалены, а все новые вставлены). Это дорогостоящая операция и следует избегать её, если это возможно.

Для настройки алгоритма отслеживания по умолчанию, NgFor поддерживает опцию trackBy. trackBy принимает функцию с двумя аргументами: index и item. Если trackBy задана, Angular отслеживает изменения по возвращаемому значению функции.

Синтаксис

• <li *ngFor="let item of items; let i = index; trackBy: trackByFn">...</li>
• <li template="ngFor let item of items; let i = index; trackBy: trackByFn">...</li>

С элементом <template>:

<template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
  <li>...</li>
</template>

Пример

См. живой пример для более подробного примера.

Конструктор

constructor(_viewContainer: ViewContainerRef, _template: TemplateRef<NgForRow>, _differs: IterableDiffers, _cdr: ChangeDetectorRef)

Подробности класса

ngForOf : any

ngForTrackBy

ngForTemplate

ngOnChanges(changes: SimpleChanges) : void

ngDoCheck() : void

экспортировано из @angular/common/index, определено в @angular/common/src/directives/ng_for.ts