Question

如何为ngClass使用多个条件？示例：

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

像这样的事情。我为2个菜单上了同一个班级，当其中一个菜单是真的时，我需要上课，而且“＃39;是真的。希望我解释得很好

Answer 1

您正在尝试将数组分配给ngClass，但数组元素的语法是错误的，因为您使用int cores = Runtime.getRuntime().availableProcessors(); ExecutorService executorService = Executors.newFixedThreadPool(cores);而不是||分隔它们。

试试这个：

这也应该有效：

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

Answer 2

你需要对象表示法

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

参考：https://angular.io/api/common/NgClass

Answer 3

有多种方法可以编写相同的逻辑。如前所述，您可以使用对象表示法或简单表达式。但是，我认为你在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>

Answer 4

<section [ngClass]="{'class1':expression1, 'class2': expression2, 
'class3':expression3}">

不要忘记在班级名称周围添加单引号。

Answer 5

我有类似的问题。我想在查看多个表达式后设置一个类。 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]的真/假。

Answer 6

<a [ngClass]="{'class1':array.status === 'active','class2':array.status === 'idle','class3':array.status === 'inactive',}">

Answer 7

您可以使用特定的类而不是使用 [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>

Answer 8

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

解决方案：1

<section [ngClass]="(condition)? 'class1 class2 ... classN' : 'another class1 ... classN' ">

解决方案2

<section [ngClass]="(condition)? 'class1 class2 ... classN' : '(condition)? 'class1 class2 ... classN':'another class' ">

ngClass中的多个条件 - Angular 4

8 个答案: