Angular2 Anwendung dynamische CSS-Klasse nicht

Question

ich eine Erweiterung Panel-Gruppe haben und ich versuche, eine CSS-Klasse auf das aktive Panel Appy:

<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-Klasse active hat eine Hintergrundfarbe gelb zu sagen. In meiner Komponente drucke ich console.log(this.selectedTask==task.id), was wahr wird, aber meine Klasse wird nicht angewendet.

Meine Komponente:

selectTaskToEdit(task){ 

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

und CSS:

.active { 
    background-color: yellow; 
} 

Mache ich etwas falsch?

UPDATE: Ich konnte es [style.background-color]="task.id == selectedTask ? 'yellow': null " mit lösen aber ich es wissen möchte, wenn mit ngClass tun

Answer 1

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

oder

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

eine richtige Weg ist, ist der einzige Weg, es zu machen, weil mdl-expansion-panel eigene host class expressions hat, die Ihre außer Kraft setzt s [ngClass].

Here ist das Beispiel PLNKR.