[英]Angular2 applying dynamic css class fails
I have an expansion panel group and I am trying to appy a css class to the active panel: 我有一个扩展面板组,我正在尝试将一个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 class active
has a background color set to say yellow. active
CSS类的背景颜色设置为黄色。 In my component I am printing console.log(this.selectedTask==task.id)
which comes out true, however my class is not being applied. 在我的组件中,我正在打印
console.log(this.selectedTask==task.id)
,它显示为true,但是未应用我的类。
My component: 我的组件:
selectTaskToEdit(task){
this.task=task;
this.selectedTask=task.id;
console.log(this.selectedTask==task.id)
}
and css: 和CSS:
.active {
background-color: yellow;
}
Am I doing anything wrong? 我做错什么了吗?
UPDATE : I could solve it using [style.background-color]="task.id == selectedTask ? 'yellow': null "
however I would like to know if there is a correct way of doing with ngClass 更新 :我可以使用
[style.background-color]="task.id == selectedTask ? 'yellow': null "
解决它,但是我想知道是否有正确的方法使用ngClass
[style.background-color]="task.id == selectedTask ? 'yellow': null"
or 要么
[class.active]="task.id == selectedTask"
is the only way to make it, because mdl-expansion-panel
has own host class expressions , which overrides yours [ngClass]
. 这是唯一的方法,因为
mdl-expansion-panel
具有自己的宿主类表达式 ,它会覆盖您的[ngClass]
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.