Angular2無法動態更改css樣式

我正在使用angular2來設計一些輸入表單，當用戶沒有修改權限時它們將被禁用，但是當管理員登錄時，輸入被啓用。爲了讓它更加明顯，我嘗試對它們進行設計，禁用時爲灰色，啓用時爲白色。Angular2無法動態更改css樣式

在HTML代碼

：

<input type="text" class="form-control" [style.background]="cssColor" name="" [disabled]="!editionEnable" placeholder="value" 
            [(ngModel)]="class.property" />

我試着用[style.backgroundColor]="cssColor"也並沒有改變背景顏色。也試過[ngStyle]="{'background-color': cssColor}">，並在代碼試圖聲明cssColor這樣的：

cssColor：「＃F0F0F0重要的」串=;
cssColor：string =「＃F0F0F0」;
cssColor：string =「F0F0F0」;

我加了！因爲用firefox中的web開發工具進行編輯很重要，如果！important不在那裏，背景顏色不會改變。

注：我使用Twitter的引導

上什麼，我dooing不對任何想法？用angularjs做這件事更簡單。

來源

2017-02-27 B.J. A.A.

我認爲cssColor是在你的組件類中設置的。給它一個默認值。然後根據editionEnable切換它。 –

請嘗試做這樣的事情：

<input type="text" class="form-control" [style.background]="setCssColor()" name="" [disabled]="!editionEnable" placeholder="value" 
            [(ngModel)]="class.property" />

，並在您的組件，這樣的事情：

setCssColor() { 
    if(this.editionEnable) { 
     return "#F0F0F0 !important"; 
    } else { 
     return "#00ff"; //whatever color 
    } 
    }

希望這有助於。

來源

2017-02-28 00:17:11 Usman

不，它沒有幫助，我也加入到css文件中，但沒有任何變化 –

這是一個工作的plunk，它會做你以後的事 - 不知道爲什麼它沒有爲你工作https://plnkr.co/edit/ uBNF65？p = preview – Usman

我使用引導程序，不知道引導程序是否優先於我的css –

試試這個：

組件內部：

public cssColor:string="#F0F0F0";

的component.html

<input type="text" class="form-control" [ngStyle]="{'background-color': cssColor}" placeholder="value" />

而且這可能是值得一提，停止應用程序裏面，運行npm cache clear然後重新運行應用程序。

無論哪種方式上面的例子是我的工作結束。

來源

2017-02-28 03:10:42

我已經在野蠻服務器上運行，但顏色不變 –

事實證明，我們在自定義CSS文件中有這樣一行：.input { background:#0f0f0f !important;} 我剛剛刪除的!important，一切工作正常。

來源

2017-03-01 23:49:23

Angular2無法動態更改css樣式

回答

相關問題