条件に基づいてCSSクラスプロパティを変更する（角度2のngIf）

Question

条件に基づいてCSSクラスを変更します。私はこれを使用しようとしています：

<div *ngIf="dropDownBg==='Active'"> 
<style type="text/css"> 
.ui-select-toggle{ 
    background: green !important; 
    } 
</style> 

</div> 


<div *ngIf="dropDownBg==='Suspended'"> 
<style type="text/css"> 
.ui-select-toggle{ 
    background: red !important; 
    } 
</style> 

</div> 

<div *ngIf="dropDownBg==='Disabled'"> 
<style type="text/css"> 
.ui-select-toggle{ 
    background: grey !important; 
    } 
</style> 

</div> 

しかし、これは動作しません。デフォルトではブラウザは無視されており、divsは*ngIfで、最後のスタイルだけが他のスタイルを上書きします。以下は、ブラウザの解釈は次のとおりです。

UPDATE：私は内部的に、私は任意のコントロールを持っていないクラスのUI-SELECT-toggle'overを使用していますng-selectドロップダウンを使用していますので、このシナリオでは、発生しました。だからWEIRD人がこの質問をd​​ownvoting、その点に注意してください。

これはコードです：

<div style="min-width: 200px;position: absolute;right: 0"> 
      <ng-select 
        [items]="items" 
        (selected)="selected($event)" 
        [active]="selectedItem" 
        (removed)="removed($event)" 
        placeholder="Select a number"> 
      </ng-select> 
</div> 

Answer 1

あなたが動的にこのような文書のスタイルシートを変更することはできません。代わりに、可能な状況のクラスを定義し、トグルのクラスを変更します。

することは、このような何か試してみてください：

.ui-select-toggle    { /* whatever */ } 
.ui-select-toggle.suspended { background: red; } 
.ui-select-toggle.active  { background: green; } 

をそしてトグルのクラスを変更：

<div 
    class="ui-select-toggle" 
    [class.suspended]="dropDownBg==='Suspended'" 
    [class.active]="dropDownBg==='Active'" 
> 
</div> 

あなたがメインクラスに共通のプロパティを定義できるように、要素が（、いくつかのCSSクラスを持つことができますui-select-toggle）と、セカンダリクラスの各状態に固有の追加のプロパティ。

Answer 2

あなたは3つのスタイル を作成する必要がありますあなたの場合は

、あなたはディレクティブ

[NgClass] = "{style1: condition, style2: condition, style3: condition} 

Answer 3

を使用し、それは（ここではバックグラウンドである）だけつのプロパティだ場合、あなたはこれを行うことができます：あなたは

<div [style.background]="...">...</div> 

を場合によっては、次のようになります。

<div [style.background]="dropDownBg === 'Active' ? 'green' : dropDownBg === 'Suspended' ? : red : dropDownBg === 'Disabled' ? 'grey' : 'black'">...</div> 

黒はあなたのフォールバックカラーです。