Angular 同一等级的角度条件和cssclass
我需要在同一个“ngClass”中同时使用条件和类,有没有可能的方法Angular 同一等级的角度条件和cssclass,angular,Angular,我需要在同一个“ngClass”中同时使用条件和类,有没有可能的方法 [ngClass]=“{cssclass1:object.cssclass1status,object.cssclass2}” 粗体部分是条件,斜体部分是可以更改的CSS类。我单独使用了这些选项,比如 conditional [ngClass]="{cssclass1 : object.cssclass1status}" object.cssclass1status : Boolean classes [ngClass]=
[ngClass]=“{cssclass1:object.cssclass1status,object.cssclass2}”
粗体部分是条件,斜体部分是可以更改的CSS类。我单独使用了这些选项,比如
conditional [ngClass]="{cssclass1 : object.cssclass1status}"
object.cssclass1status : Boolean
classes [ngClass]="object.cssclass2"
object.cssclass2 : string
您必须将对象传递给一个方法,并让该方法构建ngClass的对象语法。比如说
// component.html
<div [ngClass]="getClasses(object)">...</div>
// component.ts
getClasses(obj){
let classes = {
'cssclass1': obj.cssclass1status // determine true/false of class one
};
classes[obj.cssclass2] = true; // set class name and set to true
return classes;
}
//component.html
...
//组件技术
GetClass(obj){
让类={
“cssclass1”:obj.cssclass1status//确定类1的真/假
};
类[obj.cssclass2]=true;//设置类名并设置为true
返回类;
}
这是一个演示程序。像这样尝试:
<div [ngClass]="(object.cssclass1status && object.cssclass2=='stringVal') ? 'cssclass1' : ''"></div>
@DanushkaAmithWeerasingha我已经更新了我的答案。我之前的回答仅在动态类名是组件的属性而不是嵌套属性时有效。因此,
[ngClass]=“{myClass:true}”
可以工作,但是[ngClass]=“{object.myClass:true}”
不能工作。这就是为什么需要这种方法。