如何根据表格单元格中的值更改表格行的背景颜色？
尚里斯
我正在使用Angular*ngFor指令生成动态表。这是下面的结构：
<tr *ngFor = 'let element of ph'>
<td>{{element.timestamp}}</td>
<td>{{element.ph}}</td>
</tr>
生成的表的示例图像如下所示。 
我想为包含20 <PH值<50的整个表行上色。我该怎么做？
悉达（SiddAjmera）
[ngClass]如果值是您想要的值，则可以使用和应用类。
在这里，使用这个：
<table border="1">
<thead>
<td>Reading Time</td>
<td>PH</td>
</thead>
<tbody>
<tr *ngFor='let element of ph'
[ngClass]="{'color': (element.ph > 20 && element.ph < 50)}">
<td>{{element.timestamp}}</td>
<td>{{element.ph}}</td>
</tr>
</tbody>
</table>
另外，根据Yoel Rodriguez的建议，您还可以使用[class.color]它动态地应用它：
<table border="1">
<thead>
<td>Reading Time</td>
<td>PH</td>
</thead>
<tbody>
<tr *ngFor='let element of ph'
[class.color]='element.ph > 20 && element.ph < 50'>
<td>{{element.timestamp}}</td>
<td>{{element.ph}}</td>
</tr>
</tbody>
</table>
这是colorcss类：
.color {
color: white;
font-weight: bold;
background-color: red;
}
PS：我并不是在建议这种[ngStyle]方法，因为编写内联样式并不是真正的好习惯。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
根据表格标题更改表格单元格的背景颜色
- 2
根据表格单元格值更改行的颜色
- 3
根据下拉列表值更改 HTML 表格单元格的背景颜色？
- 4
根据Google表格中单元格的背景颜色更改单元格值
- 5
根据ASP和C＃中的值更改表格单元格颜色
- 6
根据值更改表格中单元格字体的颜色-RoR
- 7
根据Vue中的数据更改表格单元格的背景
- 8
如何通过VBA根据其他单元格值更改单元格的背景颜色
- 9
如何根据行中单元格的值设置电子表格中行的背景颜色
- 10
使用JavaScript根据JSON值更改表格单元格背景色
- 11
如何根据之前的单元格有条件地更改Google表格中单元格的颜色？
- 12
如何更改表格中单元格的文本颜色？
- 13
根据单元格值更改行背景颜色
- 14
如何根据单元格值更改php中的单元格表颜色？
- 15
如何根据单元格值更改php中的单元格表颜色？
- 16
React：如何根据React表中的单元格值更改表单元格背景
- 17
表格单元格的：hover属性不会更改背景颜色
- 18
根据状态更改 JSON 的 HTML 表格的单元格颜色
- 19
如何根据jQuery中的当前单元格值更改前一个表格单元格的CSS样式和链接
- 20
通过单击表格单元格中的任意位置来选中表格单元格中的复选框，并更改该单元格的背景颜色
- 21
根据不同列中的值更改单元格背景
- 22
在使用Bootstrap的CSS类时如何更改表格单元格的背景颜色？
- 23
如何在JavaFx 8表格视图中更改未选择的单元格的背景颜色
- 24
如何更改选定的可扩展表格视图单元格的背景颜色
- 25
根据Google电子表格中的单元格颜色更改单元格值
- 26
无法在HTML中的表格单元格中更改颜色
- 27
根据同一行中的特定RGB值更改单元格颜色
- 28
如何在Excel中制作一个单元格以根据其他单元格的值更改颜色？
- 29
使用纯javascript更改表格中单元格的颜色
我来说两句