Циклы с помощью @for

Блок at-for повторяет содержимое для каждого элемента коллекции. Он заменяет старую директиву star-ngFor и требует выражения track.

Запишите символ @, слово for, затем item of items и обязательную конструкцию track с указанием уникального ключа.

Выражение track сообщает Angular, как идентифицировать каждый элемент при изменениях, чтобы повторно использовать узлы DOM, а не создавать их заново. Это значительно повышает производительность.

Если у элементов нет стабильного идентификатора (например, это список примитивных строк), можно отслеживать сами элементы.

Блок at-empty отображается, когда в коллекции нет элементов. Он следует за закрывающей фигурной скобкой блока at-for.

Внутри блока at-for доступны полезные переменные, включая index, count, first, last, even и odd. Сохраните их с помощью let.

Значение dollar-index задаёт позицию текущего элемента, начиная с нуля; обычно ему присваивают другое имя локальной переменной, как показано выше.

Логические значения dollar-first и dollar-last равны true для первого и последнего элементов соответственно; это удобно для стилизации или разделителей.

Логические значения dollar-even и dollar-odd помогают задавать чередующиеся стили строк.

Коллекция может поступать из сигнала: просто вызовите его в выражении for.

Поскольку track обязателен, новый at-for работает быстрее star-ngFor без trackBy: Angular всегда знает, как сопоставить элементы с узлами DOM.

Вы изучили блок at-for с обязательным выражением track, блок at-empty для пустых коллекций и контекстные переменные, такие как index, first, last, even и odd. Он заменяет star-ngFor. Далее: переключение с помощью at-switch.