angular2設定した背景色

Question

私は0までカウントダウンするカウンタを持っている、と私は、カウンタ値に応じて要素の背景色を設定したい：

• 緑：20以上
• オレンジ：10レッド
〜20：私がやった9以下

が要素に3つの異なるクラスを適用し、それらのそれぞれに異なる条件を与えることです。

<p [class.green]="20 <= counter" [class.orange]="10 <= counter && counter <= 20" [class.red]="10 > counter"> 
    {{ counter }} 
</p> 

は、望ましい結果を達成するためのより良い （あるいは少なくともそれ以上修正）方法はありますか？

Answer 1

IMHO大丈夫です。

代わりに、コンポーネントに機能を持たせ、 'orange'、 'green'または 'red'の属性を割り当て、class = "{{statusAlert }} "。モデル内にすべてのチェッカーを持ち、テンプレートに入れたくない場合は、代わりの方法です。そのようにすると、そのvarはテンプレート内の他の要素に対して再利用できるのに対し、あなたのアプローチを使用すると、そのクラスを割り当てる各要素に対してvarを実装する必要があります。あなたはそれをより読みやすく、理解しやすくするために、テンプレート内のあまりのロジックを置くことは避けるべき

[ngClass]="counter>=20?'green':counter>=10?'orange':'red'" 

注：

Answer 2

さて私は、バインディング[ngClass]を使用して、より簡潔な方法を考えます。多分あなたのコンポーネントのメソッドを使用して：

component.ts：

getColor(counter){ 
    return counter>=20?'green':counter>=10?'orange':'red'; 
} 

テンプレート：

[ngClass]="getColor(counter)"