Angular2應用動態CSS類失敗

我有一個擴展面板組和我試圖APPY一個CSS類的活動面板：Angular2應用動態CSS類失敗

<mdl-expansion-panel-group> 
    <mdl-expansion-panel *ngFor="let task of tasks" [ngClass]="{'active': task.id == selectedTask}"> 
     <mdl-expansion-panel-header> 
      <mdl-expansion-panel-header-list-content><h6>{{task.what_task}} {{task.id}}</h6></mdl-expansion-panel-header-list-content> 
     </mdl-expansion-panel-header> 
     <mdl-expansion-panel-content> 
      <mdl-expansion-panel-body> 

       <button mdl-button mdl-button-type="raised" mdl-colored (click)="selectTaskToEdit(task)"> 
        Edit 
       </button> 

      </mdl-expansion-panel-body> 
     </mdl-expansion-panel-content> 
    </mdl-expansion-panel> 
</mdl-expansion-panel-group>

CSS類active有一個背景顏色設置爲黃說。在我的組件中，我打印出console.log(this.selectedTask==task.id)，但是我的課沒有被應用。

我的組件：

selectTaskToEdit(task){ 

    this.task=task; 
    this.selectedTask=task.id; 
    console.log(this.selectedTask==task.id) 
    }

和css：

.active { 
    background-color: yellow; 
}

難道我做錯了什麼？

更新：我能解決它使用[style.background-color]="task.id == selectedTask ? 'yellow': null "不過，我想知道是否有與ngClass做的正確的方式

來源

2017-07-30 Nitish

你能告訴我們'selectTaskToEdit'代碼嗎？你在哪裏設置'selectedTask'？ –

你在哪裏指定了'active'css類？ –

'background-color：yellow！important;'你可否請嘗試在最後添加'！important'並讓我知道它是否有效。 – micronyks

[style.background-color]="task.id == selectedTask ? 'yellow': null"

或

[class.active]="task.id == selectedTask"

是唯一的辦法，因爲mdl-expansion-panel有自己的host class expressions，它會覆蓋你的s [ngClass]。

Here就是plnkr的例子。

來源

2017-07-30 09:17:10

[class.active] =「task.id == selectedTask」沒有任何效果:(但是第一種方法是有效的，但我知道它會接受它的答案 – Nitish

Angular2應用動態CSS類失敗

回答

相關問題