我的mat图标元素的颜色应该动态更改。
<mat-icon class="temperature icon" svgIcon="thermometer-alert" matTooltip = {{temp_tooltip}}
aria-label="Icon that displays a tooltip when focused or hovered over"
[ngClass]= "{
'safe' : 23 <= temp_tooltip <= 24.5,
'alarm_lowside' : 21 <= temp_tooltip < 23,
'alarm_highside' : 24.5 < temp_tooltip <= 26,
'critical_lowside' : temp_tooltip < 21,
'critical_highside' : temp_tooltip > 26
}" >
</mat-icon>
temp_tooltip值在component.ts中绑定
和css有颜色造型
.safe {
color: green
}
.alarm_lowside {
color: yellow
}
.alarm_highside {
color: yellow
}
.critical_lowside {
color: red
}
.critical_highside{
color: red
}
它适用于critical_lowside和critical_highside类,但不适用于其他类。怎么纠正。定义ngClass的方式是否正确?
23 <= temp_tooltip <= 24.5
不是javascript / typescript中的正确表达式。
你应该找到另一种方法来表达这种情况,如23 <= temp_tooltip && temp_tooltip <= 24.5
正确的语法是这样的:
[ngClass]= "{
'safe' : temp_tooltip >= 23 && temp_tooltip <= 24.5,
'alarm_lowside' : temp_tooltip >= 21 && temp_tooltip < 23,
'alarm_highside' : temp_tooltip > 24.5 && temp_tooltip <= 26,
'critical_lowside' : temp_tooltip < 21,
'critical_highside' : temp_tooltip > 26
}"