Question

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

例如，如果特定行的 temperature 值大于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;
}

Answer 2

我喜欢使用这种模式设置表格行的样式：

  <tr *ngFor="let temperature of temperatures"
                [ngClass]="{'green' : temperature.value == 10, 'orange' : temperature.value == 20, 'red' : temperature.value == 30}">
              <td>{{temperature.value}}</td>
  </tr>

我为CSS中的这些行定义颜色或其他样式：

.red{
   color: red;
}
.orange{
    color: orange;
}
.green{
   color: green;
}

如何设置角度材料数据表的各个行的样式？

2 个答案: