根据Angular 6中的值更改td中文本的颜色

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>

如果状态为 Pass and Approved，则文本为绿色， 如果状态为失败和错误，则文本为红色， 如果状态为警告，则文本为黄色， 如果状态为 Ignored，则文本为蓝色，

谁能帮我在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
}

根据状态从对应的颜色数组返回颜色值

就是这样

Demo