Middle
Angular-Aufgabe: Erstellen Sie eine Vorlage mit ngFor zur Anzeige einer Liste von Früchten. Fügen Sie eine bedingte Zeilenfärbung hinzu, wenn der Wert fehlt. Fügen Sie trackBy hinzu.
sobes.tech KI
Antwort von 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 отслеживал элементы по индексу.