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

Ananya 发表于 Dev

阿南亚

我的表格中有一个状态列，其中需要根据值显示不同的颜色文本。我正在使用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中做到这一点。

维加

首先，您可以实例化对应颜色的数组：

打字稿：

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
}

它根据来自相应颜色数组的状态返回颜色值

而已

演示版

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。