Middle
Exercice Angular : écrire un modèle avec ngFor pour afficher une liste de fruits. Ajouter une coloration conditionnelle de la ligne si la valeur est manquante. Ajouter trackBy.
sobes.tech IA
Réponse de l'IA
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 отслеживал элементы по индексу.