web-dev-qa-db-fra.com

Angular2 - Définir une couleur différente pour un élément en fonction de la valeur

Je suis nouveau sur Angular2 et je me demandais comment définir une couleur de police pour un élément en fonction de la valeur.

Mon scénario est le suivant: si la valeur du champ de saisie n'est pas 100, alors je le veux en rouge, mais si elle est 100, je le veux en vert.

J'ai le code suivant en place mais je ne peux pas le faire fonctionner.

XXX.component.css 

.red {
    color: red; 
}

.green {
    color: green;
}

XXX.component.css 

<input mdInput placeholder="Proportion '%'" [(ngModel)]="proportion ">
<p>hello <span ng-class='{red : proportion!= '100', green: proportion === '100'}'>{{proportion}}</span></p>
angularangular2-templateangular2-forms
7
murday1983

Il existe deux solutions pour changer la couleur de la police, mais cela dépend de vos besoins.

  1. Si vous souhaitez modifier le style en ligne, vous pouvez utiliser la directive angulaire NgStyle qui met à jour un style d'élément HTML pour vous.

NgStyle directive Ex:

<span [ngStyle]="{'color': proportion === '100' ? 'green' : 'red'}"></span>

        ---------------------- OR -----------------------------------

<span [style.color]="proportion === '100' ? 'green' : 'red'"></span>
  1. Si votre exigence est change classe, vous pouvez utiliser la directive angulaire NgClass qui ajoute et supprime les classes CSS sur un élément HTML ...

NgClass directive Ex:

<span [ngClass]="{proportion === '100' ? 'green': 'red'}"></span>
17
mayur

Vous pouvez également lier la propriété de style.

<span [style.color]="proportion === '100' ? 'green' : 'red'"></span>
1
Dmitrij Kuba

Vous pouvez l'utiliser comme ceci:

 <div class="card template-card" [ngClass]="{'z-depth-3': template == selectedTemplate, 'not-selected': !(template == selectedTemplate) && selectedTemplate != null}">
1
giaco

Puisque vous utilisez Angular2, vous devez donc utiliser [ngClass] et que votre modèle de saisie est lié à proportion, utilisez-le donc pour comparer,

Faites-le comme:

<input mdInput placeholder="Proportion '%'" [(ngModel)]="proportion">
<p>hello <span [ngClass]="{'red': proportion !== '100', 'green': proportion === '100'}">{{username}}</span></p>
1
anoop

Vous devez modifier votre logique pour avoir des guillemets doubles et ngModel proportion value

<input mdInput placeholder="Proportion '%'" [(ngModel)]="proportion">
<p>hello <span [ngClass]="{red : proportion != '100', green: proportion === '100'}">{{username}}</span></p>

J'espère que ça aide!!

0
Jayakrishnan Gounder