如何设置 Angular Material Data Table 的单行样式？

Question

我想根据一些 json 值设置数据表的各个行的样式。

例如，如果特定行的温度值 >30，我必须将该行着色为红色。如果在 30 到 50 之间，则颜色应为绿色。否则颜色应该是绿色的。

截至目前，我只能使用以下方法定位偶数行或奇数行：

tr:nth-child(even)/tr:nth-child(odd).

Answer 1

您应该能够将 CSS 类直接添加到行元素：

<tr mat-row *matRowDef="let row; columns: displayedColumns;"
    class="temperature-row"
    [ngClass]="{'high': row.temperature > 30}">
</tr>

然后，您可以根据需要使用这些类来设置行的样式：

.temperature-row {
    background-color: green;
}

.temperature-row.high {
    background-color: red;
}