根據條件改變css類屬性（* ngIf在角2中）

-3

我希望我的css類根據條件進行更改。我試圖用這個：根據條件改變css類屬性（* ngIf在角2中）

<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：這種情況的出現是因爲我使用ng-select下拉內部使用類的UI選-toggle'over我沒有任何控制。所以WEIRD人們對此問題進行了回答，請記下這一點。

這是代碼：

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

來源

2017-06-28 Rahul Dwivedi

你不能動態地改變這樣的文檔的樣式表。相反，爲可能的情況定義類並更改切換的類。

嘗試這樣：

.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）以及特定於輔助類中每個狀態的額外屬性。

來源

2017-06-28 12:30:38

不幸的是我不能那樣做。我正在使用ng-select在內部使用此類 ui-select-toggle。我想根據條件修改這個類的屬性。 –

你可以改變ng-select的包裝類嗎？如果是這樣，你可以使用相同的技術，只適用於父元素：.suspended .ui-select-toggle {background：red; }然後改變裏面的角度分量類：

–

這就是這樣的樣子。即使我改變了包裝，這並不影響。 –

在你的情況，你必須創建3個風格並使用該指令

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

來源

2017-06-28 12:32:24

如果只有一個屬性（這裏爲背景），你可以這樣做：

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

在你情況下，它可能是：

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

黑色是您的備用顏色。

來源

2017-06-28 13:51:41 trichetriche

根據條件改變css類屬性（* ngIf在角2中）

回答

相關問題