如何对ngClass使用多个条件?例如:ngClass中的多个条件 - Angular 4
<section [ngClass]="[menu1 ? 'class1' : '' || menu2 ? 'class1' : '' || (something && (menu1 || menu2)) ? 'class2' : '']">
这样的事情。我为两个菜单获得了相同的课程,并且当其中一个菜单是真实的并且“某些”是真实的时候,我需要课程。希望我解释不够好
如何对ngClass使用多个条件?例如:ngClass中的多个条件 - Angular 4
<section [ngClass]="[menu1 ? 'class1' : '' || menu2 ? 'class1' : '' || (something && (menu1 || menu2)) ? 'class2' : '']">
这样的事情。我为两个菜单获得了相同的课程,并且当其中一个菜单是真实的并且“某些”是真实的时候,我需要课程。希望我解释不够好
您正在试图将数组分配到ngClass,但对于数组元素的语法是错误的,因为你独立他们与||
而不是,
。
试试这个:
<section [ngClass]="[menu1 ? 'class1' : '', menu2 ? 'class1' : '', (something && (menu1 || menu2)) ? 'class2' : '']">
这也应该工作:
<section [ngClass.class1]="menu1 || menu2" [ngClass.class2] = "(menu1 || menu2) && something">
你需要对象符号
<section [ngClass]="{'class1':condition1, 'class2': condition2, 'class3':condition3}" >
<section [ngClass]="{'class1':expression1, 'class2': expression2,
'class3':expression3}">
不要忘了周围的类名加单引号。
我有这个类似的问题。我想在查看多个表达式后设置一个类。 ngClass可以评估组件代码中的方法并告诉你该做什么。
所以内部的* ngFor:
<div [ngClass]="{'shrink': shouldShrink(a.category1, a.category2), 'showAll': section == 'allwork' }">{{a.listing}}</div>
和组件内:
section = 'allwork';
shouldShrink(cat1, cat2) {
return this.section === cat1 || this.section === cat2 ? false : true;
}
在这里,我需要计算的,如果我要缩小基于一个div如果2个不同的类别都匹配的是什么所选的类别是。它的工作原理。 因此,您可以根据您的方法返回的输入信息计算出[ngClass]的真/假。
有多种方法可以编写相同的逻辑。如前所述,您可以使用对象符号或简单的表达式。但是,我认为你不应该在HTML中使用那么多的逻辑。很难测试和发现问题。您可以使用getter函数来分配类。
For Instance;
public getCustomCss() {
//Logic here;
if(this.x == this.y){
return 'class1'
}
if(this.x == this.z){
return 'class2'
}
}
<!-- HTML -->
<div [ngClass]="getCustomCss()"> Some prop</div>
//OR
get customCss() {
//Logic here;
if(this.x == this.y){
return 'class1'
}
if(this.x == this.z){
return 'class2'
}
}
<!-- HTML -->
<div [ngClass]="customCss"> Some prop</div>