如何通过表数据对表行颜色设置条件？

Question

我正在使用 ngFor 从两个数组创建一个表

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

，创建的表是这样的，

Name  Age
a     15
b     20
c     25

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

在 lis1 中我有一个名称数组（a，b，c） andin lis2 我有一个年龄数组(15,20,25)

Answer 1

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

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

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

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

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