2017-12-17 17 views
0

これを達成する方法を整理しようとしています。そう複数の条件を持つループ内のif/else

<div class="btn-group float-right"> 
    <button *ngFor="let frequency of mapping?.frequency_mapping" [ngClass]="[profile?.frequency_name == frequency.label ? 'btn-success' : 'btn-outline-secondary']" type="button" value="{{ frequency.pk}}" class="btn">{{ frequency.label }}</button> 
</div> 

と私はボタンのテキストを追加する場所、私は、このボタンのfrequency.label

の値に基づいて、クラスを挿入したい:私はngForループで生成されますボタングループを持っています

if frequency.label = condition A then class = classA 
else if frequency.label = condition B then class = classB 
else if frequency.label = condition C then class = classB 

これを行うにはどうすればよいでしょうか?

基本的に私は、私はあなただけngClassに間違ったフォーマットを使用していると信じて

<button><i class="fa fa-classA"></i>{{ frequency.label }}</button> 
<button><i class="fa fa-classB"></i>{{ frequency.label }}</button> 
<button><i class="fa fa-classC"></i>{{ frequency.label }}</button> 

答えて

1

のようなものであることを最終的な結果を必要としています。 []の括弧を取り除く。

は、ルック here

あなたが探している場合のシナリオは、「どのように使用するための」セクションの第四の例であるに持っています。式を評価する必要があります。

大括弧を使用すると、ngClassはスタイルの静的な文字列の配列を期待しますが、式を評価することはありません。

関連する問題