ngClass中的多个条件 - Angular 4

Question

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

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

这样的事情。我为两个菜单获得了相同的课程，并且当其中一个菜单是真实的并且“某些”是真实的时候，我需要课程。希望我解释不够好

Answer 1

您正在试图将数组分配到ngClass，但对于数组元素的语法是错误的，因为你独立他们与||而不是,。

试试这个：

<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}" > 

裁判：https://angular.io/api/common/NgClass

Answer 3

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

不要忘了周围的类名加单引号。

Answer 4

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

Answer 5

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