Изменение свойств класса css в зависимости от условия (*ngIf в angular 2)

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 и только последний стиль отменяет другие. Ниже интерпретация браузера:

ОБНОВЛЕНИЕ: Этот сценарий возник, потому что я использую ng-select выпадающий, который внутренне использует класс 'ui-select-toggle', над которым у меня нет никакого контроля. Итак, странные люди, голосующие против этого вопроса, пожалуйста, примите это к сведению.

Это код:

<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>

С черным, как ваш запасной цвет.