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
}

它根据来自相应颜色阵列的状态返回颜色值

就这样

Demo

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

1 个答案: