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 имеет собственные выражения класса хоста, которые переопределяют ваши [ngClass],

Вот пример плнкр.