应用动态 css 类的 Angular2 失败

Question

我有一个扩展面板组，我正在尝试将 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进行操作

Answer 1

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

或

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

是唯一的方法，因为mdl-expansion-panel有自己的主机类表达式，它会覆盖您的[ngClass]。

这是示例 plnkr。