@for

Блок @for многократно отображает содержимое блока для каждого элемента коллекции.

Синтаксис

@for (item of items; track item.name) {
  <li>{{ item.name }}</li>
} @empty {
  <li>There are no items.</li>
}

Описание

Блок @for отображает свое содержимое в ответ на изменения коллекции. Коллекцией может быть любой итерируемый объект JavaScript, однако использование обычного Array дает преимущества в производительности.

При необходимости сразу после содержимого блока @for можно добавить секцию @empty. Содержимое блока @empty отображается, когда элементов нет.

Блок @for в Angular не поддерживает управляющие поток выполнения операторы, такие как continue или break в JavaScript.

track и идентичность объектов

Значение выражения track определяет ключ, используемый для связывания элементов массива с представлениями в DOM. Четкое определение идентичности элемента позволяет Angular выполнять минимальный набор операций с DOM при добавлении, удалении или перемещении элементов коллекции.

Для оптимизации производительности, особенно при циклической обработке неизменяемых данных, убедитесь, что выражение track эффективно используется для уникальной идентификации каждого элемента. Из-за возможного снижения производительности выражение track обязательно для циклов @for.

Для статичных коллекций track $index — это простой способ отслеживания. Для динамических коллекций, в которых элементы добавляются, удаляются или меняют порядок, используйте уникальное свойство каждого элемента в качестве ключа отслеживания.

Выражения track могут ссылаться только на $index, элемент, а также свойства и методы класса компонента. Если сегмент let блока @for объявил псевдоним для $index, на этот псевдоним также можно ссылаться.

$index и другие контекстные переменные

Внутри содержимого @for всегда доступны несколько неявных переменных:

Эти переменные всегда доступны под указанными именами, но им можно задать псевдонимы с помощью сегмента let:

@for (item of items; track item.id; let idx = $index, e = $even) {
  Item #{{ idx }}: {{ item.name }}
}

Псевдонимы особенно полезны при использовании вложенных блоков @for, в которых имена контекстных переменных могут совпадать.