Middle
Angular-ის დავალება: დაწერეთ ngFor-ის გამოყენებით შაბლონი ხილის სიის გამოსაყენებლად. თუ მნიშვნელობა არ არის, ხაზის შეღებვა დაამატეთ. trackBy დაამატეთ.
sobes.tech AI
პასუხი AI-სგან
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 отслеживал элементы по индексу.