Изменить цвет текста в тд на основе значения в Angular 6

Question

В моей таблице есть столбец статуса где мне нужно показать другой цвет текста в зависимости от значения. Я работаю с использованием Angular 6.

<table>
<th>Status</th>
<th>Name</th>
<tr *ngFor="let data of data >
<td>{{data.status}}</td>
<td>{{data.name}}</td>
</tr>
</table>

Если статус «Пропущен и утвержден», текст отображается зеленым цветом, Если состояние не удалось и ошибка, то текст красного цвета, Если статус является предупреждением, то текст отображается желтым цветом, Если статус игнорируется, то текст отображается синим цветом,

Может кто-нибудь, пожалуйста, помогите мне, как сделать это в Angular 6.

Answer 1

Во-первых, вы можете создать экземпляр массива для соответствующих цветов:

Машинопись:

colors = [{ status: "Passed", color: "red" }, { status: "Approuved", color: "red" }, 
                { status: "warning", color: "green" }, { status: "Ignored", color: "yellow" }]

Затем вы можете использовать ngStyle для динамической установки стиля:

HTML

...
<tr *ngFor="let row of data" [ngStyle]="{'background':getColor(row.status)}">
...
</tr>

, где getColor - это следующий метод:

Машинопись

getTheColor(status) {
       return this.colors.filter(item => item.status === status)[0].color 
       // could be better written, but you get the idea
}

Возвращает значение цвета на основестатус из соответствующего цветового массива

Вот так

Демо