Зачем в новых шаблонных циклах Angular использовать track и по какому полю лучше трекать элементы? Что будет при track по объекту?

html ul li ngFor="let fruit of fruits; trackBy: trackByFn" [style.color]="fruit ? 'black' : 'red'" {{ fruit || 'Значение отсутствует' }} li ul

Короткий ответ

Что ответить на собеседовании

html <ul> <li ngFor="let fruit of fruits; trackBy: trackByFn" [style.color]="fruit ? 'black' : 'red'"> {{ fruit || 'Значение отсутствует' }} </li> </ul>

Подробный разбор

Ответ с пояснениями

html <ul> <li *ngFor="let fruit of fruits; trackBy: trackByFn" [style.color]="fruit ? 'black' : 'red'"> {{ fruit || 'Значение отсутствует' }} </li> </ul>


```typescript
fruits = ['яблоко', null, 'банан', undefined, 'апельсин'];

trackByFn(index: number, item: string | null | undefined): number {
  return index; // или можно использовать уникальный идентификатор, если есть
}

В этом шаблоне:

  • Используется *ngFor для перебора массива фруктов.
  • Если значение отсутствует (null или undefined), строка окрашивается в красный цвет и выводится текст "Значение отсутствует".
  • Добавлен trackBy для оптимизации рендеринга, чтобы Angular отслеживал элементы по индексу.

Практика в реальном времени

Подготовьтесь к следующему собеседованию

Interview Boost учитывает вакансию, резюме и технологии и помогает сформулировать ответ прямо во время интервью.

Начать подготовку