NgClass 中的多重条件-角度4

如何为 ngClass 使用多个条件? 示例:

<section [ngClass]="[menu1 ? 'class1' : '' || menu2 ? 'class1' : '' || (something && (menu1 || menu2)) ? 'class2' : '']">

就像这样。我得到了两个菜单相同的类，我需要类时，其中一个菜单是真的，“东西”是真的。希望我解释得够清楚了

189133 次浏览
小开

你需要对象符号

<section [ngClass]="{'class1':condition1, 'class2': condition2, 'class3':condition3}" >

档号: NgClass

小开
最佳答案

您试图将一个数组分配给 ngClass，但是数组元素的语法是错误的，因为您使用 ||而不是 ,来分隔它们。

试试这个:

<section [ngClass]="[menu1 ? 'class1' : '',  menu2 ? 'class1' : '', (something && (menu1 || menu2)) ? 'class2' : '']">

另一种选择也应该有效:

<section [ngClass.class1]="menu1 || menu2" [ngClass.class2] = "(menu1 || menu2) && something">
小开 
<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 ]的 true/false 值，基于给定输入的方法返回的值。

小开

有多种方法可以编写相同的逻辑。正如前面提到的，您可以使用对象表示法或简单的表达式。但是，我认为在 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',}">
小开

我希望这是一个基本的条件类

解决方案: 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">
小开

您可以使用特定的类，而不是使用 < strong > [ngClass] 。请注意，在第二个例子中，我使用了年龄变量作为补偿的目的。

例子一:

<section
[class.class1]="menu1"
[class.class2]="menu2"
[class.class3]="menu3">
</section>

例二:

   <section
[class.class1]="age > 20"
[class.class2]="age < 50"
[class.class3]="age == 4">
</section>
小开

对于更复杂的情况，这可能是有帮助的

<div [ngClass]="{'Class1':(condition1 || condition2), 'class2':( (condition1 || condition2) && condition3 )}"> Some content</div>

提交答案