Dev Faq
0
votes

Ne peut pas comprendre pourquoi la couleur de fond de ma table n'apparaît pas comme je le veux

J'ai récemment commencé à utiliser Node-rouge pour couple avec un serveur OPC UA. Je veux afficher un modèle personnalisé pour mon tableau de bord. Je suis au point où je veux changer la couleur de fond de ma définition de table. J'ai essayé ce qui suit: xxx

tandis que le texte est sorti comme suit: Normal Rouge, ma couleur de fond est green qui n'est pas ce que je veux.

Que puis-je faire pour résoudre ce problème (petit) problème?

EDIT: Ceci est ma fonction JS qui renvoie le msg, j'ai défini le msg.payload sur un objet que j'ai effectué. xxx

et voici mon modèle HTML: < Pré> xxx

4 commentaires

Vous ne pouvez pas changer 'vert' à quelque chose d'autre?

Je veux que le fond soit vert ou rouge

Votre élément TD est-il dans une table réelle?

Oui, je l'ai imbriqué dans Tags à l'intérieur de la

Tags

4 Réponses :

1
votes

Avez-vous essayé de supprimer le {{}} supplémentaire code> à l'intérieur du code> NG-style code>? Car aussi loin que je sais que vous pouvez déjà utiliser une expression à l'intérieur. 

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

1 commentaires

J'utilise la charge utile à partir d'une fonction JavaScript comme entrée pour mon modèle HTML. J'ai une variable dans ma charge utile que j'accède comme dans mon exemple de code, si je retire les crochets, cela ne fonctionne plus

0
votes

Essayez de retirer les supports internes, comme celui-ci

​​ p> 

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

0 commentaires
0
votes

Que diriez-vous de cela? XXX

Il est toujours préférable d'aborder un attribut de style unique, au lieu d'écraser tous les styles en ligne. Il est également plus lisible.

0 commentaires
0
votes

Correction de mon problème! Changement de la fonction JS en suivante: 

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

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO