web-dev-qa-db-de.com

Angular2 - Legen Sie je nach Wert eine andere Farbe für ein Element fest

Ich bin neu bei Angular2 und habe mich gefragt, wie ich eine Schriftfarbe auf ein Element setze, abhängig vom Wert.

Mein Szenario ist: Wenn der Wert des Eingabefeldes nicht 100 ist, dann möchte ich es rot, aber wenn es 100 ist, dann möchte ich es grün.

Ich habe den folgenden Code installiert, kann ihn aber nicht zum Laufen bringen.

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

Es gibt zwei Lösungen zum Ändern der Schriftfarbe, hängt jedoch von Ihrer Anforderung ab

  1. Wenn Sie den Inline-Stil ändern möchten, können Sie die winklige NgStyle Direktive verwenden, die HTML-Elementstile für Sie aktualisiert.

NgStyle directive Ex:

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

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

<span [style.color]="proportion === '100' ? 'green' : 'red'"></span>
  1. Wenn Sie eine Änderungsklasse benötigen, können Sie die angle NgClass Direktive verwenden, die CSS-Klassen zu einem HTML-Element hinzufügt und entfernt.

NgClass directive Ex:

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

Sie können die style -Eigenschaft auch binden.

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

Sie können es so verwenden:

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

Da Sie Angular2 verwenden, müssen Sie [ngClass] verwenden, und Ihr Eingabemodell ist an proportion gebunden. Verwenden Sie es daher zum Vergleichen.

Mach es wie:

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

Sie müssen Ihre Logik ändern, um doppelte Anführungszeichen und ngModel proportion value zu verwenden

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

Ich hoffe es hilft!!

0
Jayakrishnan Gounder