Можно ли изменить стиль элемента на основе свойства объекта в Angular?

Question

У меня есть класс с некоторыми свойствами:

export class Task {
    name: string;
    state: number;
}

В моем component.ts у меня есть массив объектов с классом Task (tasks).

В шаблоне я показываю их так:

<div *ngFor='let task of tasks'>
  <p>{{ task.name }}</p>
  <p>{{ task.state }}</p>
</div>

Можно ли изменить стиль моего div на основе свойства task.state ? Например, я хочу, чтобы он был с красным фоном, когда он 0, и желтым, когда он 1. Я думаю, что мне нужно использовать директивы, но я не могу понять, как.

Answer 1

Angular дает вам две директивы для стилизации вашего элемента. Для стилизации можно использовать ngStyle или ngClass.

В вашем сценарии вы можете использовать -

- ngClass

Сначала создайте два класса css с именами 'red-bg' и 'ylow-bg' в соответствии с их поведением.

<div *ngFor='let task of tasks' [ngClass]="task.state === 0?'red-bg':'ylow-bg'">
  <p>{{ task.name }}</p>
  <p>{{ task.state }}</p>
</div>

-ngStyle

<div *ngFor='let task of tasks' [ngStyle]="{'background-color':task.state===0?'red':'yellow'}">
   <p>{{ task.name }}</p>
   <p>{{ task.state }}</p>
</div>