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类失败

回答

相关问题