Angular2应用动态css类失败

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 有自己的host class expressions，它会覆盖你的[ngClass]。

Here 是 plnkr 的示例。