web-dev-qa-db-ja.com

Angular2-値に応じて要素に異なる色を設定

私はAngular2そして、値に応じて要素にフォントの色を設定する方法について考えていました。

私のシナリオは、入力フィールドの値が100でない場合は赤にしたいのですが、100の場合は緑にしたいということです。

次のコードを用意していますが、機能しません。

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

フォントの色を変更するには2つのソリューションがありますが、要件によって異なります

  1. インラインスタイルの変更が必要な場合は、HTML要素スタイルを更新するangular NgStyleディレクティブを使用できます。

NgStyle directive Ex:

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

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

<span [style.color]="proportion === '100' ? 'green' : 'red'"></span>
  1. クラスの変更が必要な場合は、angular NgClassディレクティブを使用して、HTML要素のCSSクラスを追加および削除できます...

NgClass directive Ex:

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

スタイルプロパティをバインドすることもできます。

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

次のように使用できます。

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

Angular2を使用しているため、[ngClass]を使用する必要があり、入力モデルはproportionにバインドされているため、比較に使用します。

次のようにします：

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

二重引用符とngModel 割合値を持つようにロジックを変更する必要があります

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

それが役に立てば幸い！！

0
Jayakrishnan Gounder