angular2の複雑な複数の条件に対してインライン[ngStyle]を書く方法

Question

ここでは、ある数値を含むときに特定の色を表示するdivに条件を渡したいとします。

条件は次のとおりです。

 if (num >= -100.0 && num <= -35.0) { 
      return '#f1403b'; 
     } else if (num > -35.0 && num <= 35.0) { 
      return '#ffc200'; 
     } else { 
      return '#34A853'; 
     } 

app.component.html 
--------------------- 
<div [ngStyle]="{'color': (num >= '-100.0' && num <= '-35.0') ? '#f1403b' : ((num > '-35.0' && num <= '35.0') ? '#ffc200' :'#34A853') 
}"> 
({{num}}) 
</div> 

Answer 1

こんにちはあなたはあなたのニーズの値を返すコントローラ内の関数を定義することができます。これをビューファイルで使用することができます。 以下、私はプランナーリンクを提供しています。ちょうどそれを通過します。それがあなたのために働くことを願っています。もしあなたがこれに疑問を持っていれば教えてください。 https://plnkr.co/edit/lW1rP9VyCeqpS5QhGjJA?p=preview

コード：

<div [ngStyle]="{'color': colorGreen(), 'font-size': size + 'px', 'font-weight': 'bold'}"> 

角度2ンスタイル例

あなたがここにあなたの場合は（）の状態をチェックし、色を返すことができます。

colorGreen = function(){ 
return 'green'; 
} 

おかげ