ngClass如何使用多个条件？示例：
<section [ngClass]="[menu1 ? 'class1' : '' || menu2 ? 'class1' : '' || (something && (menu1 || menu2)) ? 'class2' : '']">
类似的东西。我有 2 个菜单的相同课程，当其中一个菜单为真且“某事”为真时，我需要上课。希望我解释得足够好
【问题讨论】：
标签： angular
您正在尝试将数组分配给 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}" >
参考：NgClass
【讨论】：
有多种方法可以编写相同的逻辑。如前所述，您可以使用对象表示法或简单的表达式。但是，我认为您不应该在 HTML 中使用那么多逻辑。很难测试和发现问题。您可以使用 getter 函数来分配类。
例如;
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>
【讨论】：
<a [ngClass]="{'class1':array.status === 'active','class2':array.status === 'idle','class3':array.status === 'inactive',}">
【讨论】：
<section [ngClass]="{'class1': expression1, 'class2': expression2,
'class3': expression3}">
别忘了在类名两边加上单引号。
【讨论】：
您可以使用特定的类而不是使用 [ngClass]
.请注意，在第二个示例中，我使用年龄变量作为补偿目的。
示例 1：
<section
[class.class1]="menu1"
[class.class2]="menu2"
[class.class3]="menu3">
</section>
示例 2：
<section
[class.class1]="age > 20"
[class.class2]="age < 50"
[class.class3]="age == 4">
</section>
【讨论】：
我遇到了类似的问题。我想在查看多个表达式后设置一个类。 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;
}
在这里，我需要根据 2 个不同的类别是否与所选类别匹配来计算是否应该缩小 div。它有效。 因此，您可以从那里根据给定输入的方法返回的内容计算 [ngClass] 的真/假。
【讨论】：
我希望这是基本的条件类之一
解决方案：1
<section [ngClass]="(condition)? 'class1 class2 ... classN' : 'another class1 ... classN' ">
解决方案 2
<section [ngClass]="(condition)? 'class1 class2 ... classN' : '(condition)? 'class1 class2 ... classN':'another class' ">
解决方案 3
<section [ngClass]="'myclass': condition, 'className2': condition2">
【讨论】：