如何根据 table 数据对 table 行颜色设置条件？

Question

我正在使用 ngFor

从两个数组创建一个 table

    <tr *ngFor="let e of lis1; let k=index">
        <td>{{e}}  </td>
        <td>{{lis2[k]}}</td>
    
    </tr>

创建的table是这样的

Name  Age
a     15
b     20
c     25

我想更改年龄大于 20 的行的颜色。这个条件怎么写？？我正在使用 angular 打字稿。

在 lis1 中我有一个名称数组 (a,b,c) andin lis2 我有一组 age(15,20,25)

Answer 1

有多种方法可以有条件地向元素添加样式，ngStyle、ngClass、直接使用属性等。

我将向您展示如何使用 ngClass 添加样式。您可以简单地检查 [ngClass] 中的年龄是否大于 20 以应用 class 否则不会。

<tr *ngFor="let e of lis1; let k=index" [ngClass]="{'background-red': lis2[k] > 20}">
     <td>{{e}}  </td>
     <td>{{lis2[k]}}</td>  
</tr>

在您的 CSS 组件中简单添加 class

.background-red{
     background-color: red;
}

How to put condition on table row color by the table data?