ngClass中的多个条件 - Angular 4

Question

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

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

这样的事情.我有2个菜单的同一个班级,当其中一个菜单是真的并且'某事'是真的时我需要上课.希望我解释得很好

Answer 1

您正在尝试将数组分配给ngClass,但数组元素的语法是错误的,因为您使用||而不是a 分隔它们,.

试试这个:

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

这应该也有效:

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

Answer 2

你需要对象表示法

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

ref:https://angular.io/api/common/NgClass

Answer 3

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

Answer 4

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

不要忘记在类名周围添加单引号。

Answer 5

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

Answer 6

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