Angular2 应用动态 css class 失败

Question

我有一个扩展面板组，我正在尝试将 css class 应用到活动面板：

<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 class active 的背景颜色设置为黄色。在我的组件中，我正在打印 console.log(this.selectedTask==task.id) 结果是真的，但是我的 class 没有被应用。

我的组件：

  selectTaskToEdit(task){

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

和css：

.active {
  background-color: yellow;
}

我做错了什么吗？

UPDATE：我可以使用 [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.

Angular2 应用动态 css class 失败

Angular2 applying dynamic css class fails

angular2-mdl

angular