Can't understand why the background color of my table is not appearing like I want it to

can synonym
can definition
can noun meaning
can verb
can band
cant
can.'' acronym
can't

I've recently started using node-red to couple with an OPC UA server. I want to display a custom template for my dashboard. I'm at the point where I want to change the background color of my table definition. I tried the following:

<td ng-style="{'background-color':'{{msg.payload['norm'] == 0 ? 'red' : 'green'}}'}" id="overzicht">Normal {{msg.payload['norm'] == 0 ? 'red' : 'green'}}</td>

While the text gets outputted like the following: Normal red, my background color is green which is not what I want.

What can I do to fix this (small) problem?

EDIT: This is my JS function that returns the msg, I set the msg.payload to an object I've made.

msg.topic = "test";
var norm = 0;
var eco = 0;
var empt = 0;
var hyg = 0;
var hygdone = 0
;
if(msg.payload === 0){
    hygdone = 1;
}else{
    hygdone = 0;
}

if(msg.payload === 1){
    norm = 1;
}else{
    norm = 0;
}

if(msg.payload === 2){
    eco = 1;
}else{
    eco = 0;
}

if(msg.payload === 3){
    empt = 1
}else{
    empt = 0;
}

if(msg.payload === 4){
    hyg = 1;
}else{
    hyg = 0
}

obj = {
    "norm":norm,
    "eco":eco,
    "empt":empt,
    "hyg":hyg,
    "hygdone":hygdone
}
msg.payload = obj;

return msg;

And here's my HTML template:

<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>

Have you tried removing the extra {{}} inside the ng-style? Because as far I know you can already use an expression inside it.

ng-style="{'property': condition ? 'true' : 'false' }"

Can, Can may refer to: Contents. 1 Containers; 2 Music; 3 Other; 4 See also. Containers[edit]. Aluminum can � Drink can � Oil can � Steel and tin cans � Trash can� Can definition, to be able to; have the ability, power, or skill to: She can solve the problem easily, I'm sure. See more.

Try removing the inner brackets, like this

<td ng-style="{'background-color' : (msg.payload['norm'] == 0) ? 'red' : 'green'}" id="overzicht">Normal {{(msg.payload['norm'] == 0) ? 'red' : 'green'}}</td>

The Official CAN / Spoon Records Website, 1.4Used to indicate that something is typically the case. 'antique clocks can seem out of place in modern homes'. More example sentences. Define can. can synonyms, can pronunciation, can translation, English dictionary definition of can. to be able to, have the power or skill to: I can take a bus to the

How about this?

<td 
  [style.backgroundColor]="msg.payload['norm'] == 0 ? 'red' : 'green'" 
  id="overzicht">
Normal {{msg.payload['norm'] == 0 ? 'red' : 'green'}}
</td>

It is always better to address a single style attribute, instead of overwriting the all inline styles. It is also more readable.

Can, can noun [C] (CONTAINER) � can verb [T] (CONTAIN) � can modal verb (ABLE) � can modal verb (PERMIT) � can modal verb (BE POSSIBLE) � can� 110 synonyms of can from the Merriam-Webster Thesaurus, plus 97 related words, definitions, and antonyms. Find another word for can. Can: to bring (as an action or operation) to an immediate end.

fixed my problem! Changed my JS function to the following:

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;

and changed my HTML to the following:

<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>

Can, VerbEdit. can (third-person singular simple present can, present participle -, simple past could, past participle (obsolete except in� Can (stylised as CAN) was a German experimental rock band formed in Cologne in 1968 by the core quartet of Holger Czukay (bass, tape editing), Irmin Schmidt (keyboards), Michael Karoli (guitar), and Jaki Liebezeit (drums).

CAN, Word forms � 1. countable noun A can is a metal container in which something such as food, drink, or paint is put. � 2. verb [usually passive] When food or drink is� HANGZHOU, China, Aug. 04, 2020 (GLOBE NEWSWIRE) -- Canaan Inc. (NASDAQ: CAN) ("Canaan" or the "Company"), a leading high-performance computing solutions provider, today announced that the terms of

can, can 2. (kăn). n. 1. A usually cylindrical metal container. 2. A Controller Area Network (CAN bus) is a robust vehicle bus standard designed to allow microcontrollers and devices to communicate with each other's applications without a host computer.

Can definition and meaning, can meaning, definition, what is can: to be able to do something or to know ho: Learn more. Use Canva's drag-and-drop feature and layouts to design, share and print business cards, logos, presentations and more. Create beautiful designs with your team. Use Canva's drag-and-drop feature and layouts to design, share and print business cards, logos, presentations and more.

Comments
  • You can't change 'green' to something else?
  • I want the background to be either green or red
  • is your td element inside an actual table?
  • yes, I have it nested in <tr></tr> tags inside the <table></table> tags
  • I'm using the payload from a javascript function as input for my HTML template. I have a variable in my payload which I access like in my code example, if I remove the brackets, It doesn't function anymore