このシナリオのためのエレガントなデータバインディングデザインは何ですか？

Question

私はこのようになりますオブジェクトの構造を有する：

var change = 
{ 
    quarters:1 
    nickles:2 
    dimes:3 
} 

このオブジェクトは、このようなHTMLで表示されるはずです：特定のコインカウントが0、それが中に含めるべきではないされている場合は

Change is 1 quarter, 2 nickles, 3 dimes 

をメッセージ。これをng2 +で実装する最もエレガントな方法は何でしょうか？

Answer 1

コールご希望のフォーマットの変更を返すあなたのHTMLファイル内の関数：

getChange(){ 
    return "Change is "+((change.quarters == 0) ? "" : change.quarters+" quarters, ")+((change.nickles == 0) ? "" : change.nickles+" nickles, ")+((change.dimes == 0) ? "" : change.dimes+" dimes "); 
} 

：あなたのTSに

<div [innerHTML]="getChange()"></div> 

は、あなたの希望の形式で変更を返す関数を記述ファイル

変数の1つが0かどうかをチェックし、複数のif文を書くという手間を省くには、3進演算子（条件）を使用することをお勧めしますか？ （当時）：（else）。