Javascript 我不明白为什么我的桌子的背景色不是我想要的
我最近开始使用node red与OPC UA服务器进行耦合。 我想为我的仪表板显示一个自定义模板。我现在要更改表定义的背景色。我尝试了以下方法：Javascript 我不明白为什么我的桌子的背景色不是我想要的,javascript,html,node-red,Javascript,Html,Node Red,我最近开始使用node red与OPC UA服务器进行耦合。 我想为我的仪表板显示一个自定义模板。我现在要更改表定义的背景色。我尝试了以下方法： <td ng-style="{'background-color':'{{msg.payload['norm'] == 0 ? 'red' : 'green'}}'}" id="overzicht">Normal {{msg.payload['norm'] == 0 ? 'red' : 'green'}}</td> msg.t
<td ng-style="{'background-color':'{{msg.payload['norm'] == 0 ? 'red' : 'green'}}'}" id="overzicht">Normal {{msg.payload['norm'] == 0 ? 'red' : 'green'}}</td>
msg.topic = "test";
var norm = "red";
var eco = "red";
var empt = "red";
var hyg = "red";
var hygdone = "red";
if(msg.payload[0].value === 0){
hygdone = "green";
}else{
hygdone = "red";
}
if(msg.payload[0].value === 1){
norm = "green";
}else{
norm = "red";
}
if(msg.payload[0].value === 2){
eco = "green";
}else{
eco = "red";
}
if(msg.payload[0].value === 3){
empt = "green";
}else{
empt = "red";
}
if(msg.payload[0].value === 4){
hyg = "green";
}else{
hyg = "red";
}
obj = {
"norm":norm,
"eco":eco,
"empt":empt,
"hyg":hyg,
"hygdone":hygdone
}
msg.payload = obj;
return msg;
<div id="table" class="row">
<table border="1">
<tr>
<!-- color="{{((msg.payload['norm'] || 0) % 2 === 0) ? 'green' : 'red'}}" backup: {'background-color':(msg.payload['norm'])}-->
<th id="gray">Overzicht</th>
<td ng-style="{'background-color':msg.payload['norm']}" id="overzicht">Normaal {{msg.payload['norm']}}</td>
<td ng-style="{'background-color':msg.payload['eco']}" id="overzicht">Energy Save {{msg.payload['eco']}}</td>
<td ng-style="{'background-color':msg.payload['hyg']}" id="overzicht">Hygiëniseren {{msg.payload['hyg']}}</td>
<td ng-style="{'background-color':msg.payload['hygdone']}" id="overzicht">Hygiëniseren Klaar {{msg.payload['hygdone']}}</td>
<td ng-style="{'background-color':msg.payload['empt']}" id="overzicht">Leeg Draaien {{msg.payload['empt']}}</td>
</tr>
<tr>
<th id="gray">Motoren</th>
<td id="lightgray">Mixer 1</td>
<td id="lightgray">Mixer 2 (EC100)</td>
<td id="lightgray">Ventilator</td>
<td id="lightgray">0%</td>
</tr>
<tr>
<th id="gray">Verwarming</th>
<td id="xlightgray">Product Temperatuur</td>
<td>0.000 C</td>
<td id="xlightgray">Mat 1 Temperatuur</td>
<td>0.000 C</td>
</tr>
<tr>
<th id="gray">IO</th>
<td id="xlightgray">Mat 2 Temperatuur</td>
<td>0.000 C</td>
<td id="xlightgray">Mat 3 Temperatuur</td>
<td>0.000 C</td>
</tr>
<tr>
<th id="gray">Alarmen</th>
<td id="xlightgray">Verwarmings Matten</td>
<td id="lightgray">Mat 1</td>
<td id="lightgray">Mat 2</td>
<td id="lightgray">Mat 3</td>
</tr>
<tr>
<th id="gray">Diagnostics</th>
<td id="xlightgray">Programma Keuze</td>
<td id="lightgray">Kort 0000 Min</td>
<td id="lightgray">Lang 0000 Min</td>
</tr>
<tr>
<th id="gray">Parameters</th>
<td id="xlightgray">Operationele Stand</td>
<td>Switch</td>
</tr>
</table>
</div>
<div id="table" class="row">
<table border="1">
<tr>
<!-- color="{{((msg.payload['norm'] || 0) % 2 === 0) ? 'green' : 'red'}}" backup: {'background-color':(msg.payload['norm'])}-->
<th id="gray">Overzicht</th>
<td ng-style="{'background-color':'{{msg.payload['norm'] == 0 ? 'red' : 'green'}}'}" id="overzicht">Normal {{msg.payload['norm'] == 0 ? 'red' : 'green'}}</td>
<td ng-style="{'background-color':'{{msg.payload['eco'] == 0 ? 'red' : 'green'}}'}" id="overzicht">Energy Save {{msg.payload['eco'] == 0 ? 'red' : 'green'}}</td>
<td ng-style="{'background-color':'{{msg.payload['hyg'] == 0 ? 'red' : 'green'}}'}" id="overzicht">Hygiëniseren {{msg.payload['hyg'] == 0 ? 'red' : 'green'}}</td>
<td ng-style="{'background-color':'{{msg.payload['hygdone'] == 0 ? 'red' : 'green'}}'}" id="overzicht">Hygiëniseren Klaar {{msg.payload['hygdone'] == 0 ? 'red' : 'green'}}</td>
<td ng-style="{'background-color':'{{msg.payload['empt'] == 0 ? 'red' : 'green'}}'}" id="overzicht">Leeg Draaien {{msg.payload['empt'] == 0 ? 'red' : 'green'}}</td>
</tr>
<tr>
<th id="gray">Motoren</th>
<td id="lightgray">Mixer 1</td>
<td id="lightgray">Mixer 2 (EC100)</td>
<td id="lightgray">Ventilator</td>
<td id="lightgray">0%</td>
</tr>
<tr>
<th id="gray">Verwarming</th>
<td id="xlightgray">Product Temperatuur</td>
<td>0.000 C</td>
<td id="xlightgray">Mat 1 Temperatuur</td>
<td>0.000 C</td>
</tr>
<tr>
<th id="gray">IO</th>
<td id="xlightgray">Mat 2 Temperatuur</td>
<td>0.000 C</td>
<td id="xlightgray">Mat 3 Temperatuur</td>
<td>0.000 C</td>
</tr>
<tr>
<th id="gray">Alarmen</th>
<td id="xlightgray">Verwarmings Matten</td>
<td id="lightgray">Mat 1</td>
<td id="lightgray">Mat 2</td>
<td id="lightgray">Mat 3</td>
</tr>
<tr>
<th id="gray">Diagnostics</th>
<td id="xlightgray">Programma Keuze</td>
<td id="lightgray">Kort 0000 Min</td>
<td id="lightgray">Lang 0000 Min</td>
</tr>
<tr>
<th id="gray">Parameters</th>
<td id="xlightgray">Operationele Stand</td>
<td>Switch</td>
</tr>
</table>
</div>
您是否尝试过删除ng样式中多余的{{}}？因为据我所知，你已经可以在里面使用一个表达式了 ng style={'property'：条件？'true'：'false'}
尝试移除内部支架，如下图所示 正常{{msg.payload['norm']==0？'red'：'green'}}这个怎么样 正常{{msg.payload['norm']==0？'red'：'green'} 最好只处理一个样式属性，而不是覆盖所有内联样式。 它也更具可读性。修复了我的问题！ 将my JS函数更改为以下内容：
<td ng-style="{'background-color':'{{msg.payload['norm'] == 0 ? 'red' : 'green'}}'}" id="overzicht">Normal {{msg.payload['norm'] == 0 ? 'red' : 'green'}}</td>
msg.topic = "test";
var norm = "red";
var eco = "red";
var empt = "red";
var hyg = "red";
var hygdone = "red";
if(msg.payload[0].value === 0){
hygdone = "green";
}else{
hygdone = "red";
}
if(msg.payload[0].value === 1){
norm = "green";
}else{
norm = "red";
}
if(msg.payload[0].value === 2){
eco = "green";
}else{
eco = "red";
}
if(msg.payload[0].value === 3){
empt = "green";
}else{
empt = "red";
}
if(msg.payload[0].value === 4){
hyg = "green";
}else{
hyg = "red";
}
obj = {
"norm":norm,
"eco":eco,
"empt":empt,
"hyg":hyg,
"hygdone":hygdone
}
msg.payload = obj;
return msg;
<div id="table" class="row">
<table border="1">
<tr>
<!-- color="{{((msg.payload['norm'] || 0) % 2 === 0) ? 'green' : 'red'}}" backup: {'background-color':(msg.payload['norm'])}-->
<th id="gray">Overzicht</th>
<td ng-style="{'background-color':msg.payload['norm']}" id="overzicht">Normaal {{msg.payload['norm']}}</td>
<td ng-style="{'background-color':msg.payload['eco']}" id="overzicht">Energy Save {{msg.payload['eco']}}</td>
<td ng-style="{'background-color':msg.payload['hyg']}" id="overzicht">Hygiëniseren {{msg.payload['hyg']}}</td>
<td ng-style="{'background-color':msg.payload['hygdone']}" id="overzicht">Hygiëniseren Klaar {{msg.payload['hygdone']}}</td>
<td ng-style="{'background-color':msg.payload['empt']}" id="overzicht">Leeg Draaien {{msg.payload['empt']}}</td>
</tr>
<tr>
<th id="gray">Motoren</th>
<td id="lightgray">Mixer 1</td>
<td id="lightgray">Mixer 2 (EC100)</td>
<td id="lightgray">Ventilator</td>
<td id="lightgray">0%</td>
</tr>
<tr>
<th id="gray">Verwarming</th>
<td id="xlightgray">Product Temperatuur</td>
<td>0.000 C</td>
<td id="xlightgray">Mat 1 Temperatuur</td>
<td>0.000 C</td>
</tr>
<tr>
<th id="gray">IO</th>
<td id="xlightgray">Mat 2 Temperatuur</td>
<td>0.000 C</td>
<td id="xlightgray">Mat 3 Temperatuur</td>
<td>0.000 C</td>
</tr>
<tr>
<th id="gray">Alarmen</th>
<td id="xlightgray">Verwarmings Matten</td>
<td id="lightgray">Mat 1</td>
<td id="lightgray">Mat 2</td>
<td id="lightgray">Mat 3</td>
</tr>
<tr>
<th id="gray">Diagnostics</th>
<td id="xlightgray">Programma Keuze</td>
<td id="lightgray">Kort 0000 Min</td>
<td id="lightgray">Lang 0000 Min</td>
</tr>
<tr>
<th id="gray">Parameters</th>
<td id="xlightgray">Operationele Stand</td>
<td>Switch</td>
</tr>
</table>
</div>
<td ng-style="{'background-color':'{{msg.payload['norm'] == 0 ? 'red' : 'green'}}'}" id="overzicht">Normal {{msg.payload['norm'] == 0 ? 'red' : 'green'}}</td>
msg.topic = "test";
var norm = "red";
var eco = "red";
var empt = "red";
var hyg = "red";
var hygdone = "red";
if(msg.payload[0].value === 0){
hygdone = "green";
}else{
hygdone = "red";
}
if(msg.payload[0].value === 1){
norm = "green";
}else{
norm = "red";
}
if(msg.payload[0].value === 2){
eco = "green";
}else{
eco = "red";
}
if(msg.payload[0].value === 3){
empt = "green";
}else{
empt = "red";
}
if(msg.payload[0].value === 4){
hyg = "green";
}else{
hyg = "red";
}
obj = {
"norm":norm,
"eco":eco,
"empt":empt,
"hyg":hyg,
"hygdone":hygdone
}
msg.payload = obj;
return msg;
<div id="table" class="row">
<table border="1">
<tr>
<!-- color="{{((msg.payload['norm'] || 0) % 2 === 0) ? 'green' : 'red'}}" backup: {'background-color':(msg.payload['norm'])}-->
<th id="gray">Overzicht</th>
<td ng-style="{'background-color':msg.payload['norm']}" id="overzicht">Normaal {{msg.payload['norm']}}</td>
<td ng-style="{'background-color':msg.payload['eco']}" id="overzicht">Energy Save {{msg.payload['eco']}}</td>
<td ng-style="{'background-color':msg.payload['hyg']}" id="overzicht">Hygiëniseren {{msg.payload['hyg']}}</td>
<td ng-style="{'background-color':msg.payload['hygdone']}" id="overzicht">Hygiëniseren Klaar {{msg.payload['hygdone']}}</td>
<td ng-style="{'background-color':msg.payload['empt']}" id="overzicht">Leeg Draaien {{msg.payload['empt']}}</td>
</tr>
<tr>
<th id="gray">Motoren</th>
<td id="lightgray">Mixer 1</td>
<td id="lightgray">Mixer 2 (EC100)</td>
<td id="lightgray">Ventilator</td>
<td id="lightgray">0%</td>
</tr>
<tr>
<th id="gray">Verwarming</th>
<td id="xlightgray">Product Temperatuur</td>
<td>0.000 C</td>
<td id="xlightgray">Mat 1 Temperatuur</td>
<td>0.000 C</td>
</tr>
<tr>
<th id="gray">IO</th>
<td id="xlightgray">Mat 2 Temperatuur</td>
<td>0.000 C</td>
<td id="xlightgray">Mat 3 Temperatuur</td>
<td>0.000 C</td>
</tr>
<tr>
<th id="gray">Alarmen</th>
<td id="xlightgray">Verwarmings Matten</td>
<td id="lightgray">Mat 1</td>
<td id="lightgray">Mat 2</td>
<td id="lightgray">Mat 3</td>
</tr>
<tr>
<th id="gray">Diagnostics</th>
<td id="xlightgray">Programma Keuze</td>
<td id="lightgray">Kort 0000 Min</td>
<td id="lightgray">Lang 0000 Min</td>
</tr>
<tr>
<th id="gray">Parameters</th>
<td id="xlightgray">Operationele Stand</td>
<td>Switch</td>
</tr>
</table>
</div>
您不能将“绿色”更改为其他内容？我希望背景为绿色或redis您在实际表中的td元素？是的，我将其嵌套在标记内的标记中。我正在使用javascript函数的有效负载作为HTML模板的输入。在我的有效载荷中有一个变量，就像在我的代码示例中一样，如果我去掉括号，它就不再起作用了