Angular2 - Set in Einer Anderen Farbe, um ein element Je nach Wert

Ich bin neu Angular2 und Frage mich, wie ich gehen über die Einstellung der Schriftfarbe eines Elements abhängig vom Wert.

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

Ich habe den folgenden code in Ort, aber cant get es funktioniert.

XXX.Komponente.css

.red {
    color: red; 
}

.green {
    color: green;
}

XXX.Komponente.css

<input mdInput placeholder="Proportion '%'" [(ngModel)]="proportion ">
<p>hello <span ng-class='{red : proportion!= '100', green: proportion === '100'}'>{{proportion}}</span></p>
verwenden proportion hier g-class='{red : username != '100', green: username === '100'} statt username, lassen Sie mich wissen, wenn es funktioniert
Sorry copy und paste Fehler, schon geändert, um 'Anteil'

InformationsquelleAutor murday1983 | 2017-06-08

  1. 17

    Gibt es zwei Lösungen, die schriftart zu ändern Farbe, sondern Sie hängt davon ab, Anforderung

    1. Wenn Sie Voraussetzung ist, ändern Sie die inline-Stil, dann können Sie eckige NgStyle Richtlinie für die Aktualisierung einer HTML-element-styles für Sie..

    NgStyle directive Ex:

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

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

<span [style.color]="proportion === '100' ? 'green' : 'red'"></span>
    1. Wenn Sie Anforderung ist Klasse ändern, dann können Sie eckige NgClass Richtlinie, die Hinzugefügt und entfernt CSS Klassen auf ein HTML-element...

    NgClass directive Ex:

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

    InformationsquelleAutor mayur

  2. 1

    Können Sie es verwenden, wie diese:

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

    InformationsquelleAutor giaco

  3. 1

    Da Sie Verwendung Angular2, So müssen Sie [ngClass], und Ihre input-Modell ist die Bindung zu proportion, So verwenden Sie es zu vergleichen,

    Machen Sie es wie :

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

    InformationsquelleAutor anoop

  4. 1

    Können Sie auch binden Sie die style-Eigenschaft.

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

    InformationsquelleAutor Dmitrij Kuba

  5. 0

    Müssen Sie zum ändern der Logik zu haben, die doppelten Anführungsstriche und ngModel Anteil Wert

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

    Hoffe, es hilft!!

    InformationsquelleAutor Jayakrishnan Gounder

Schreibe einen Kommentar