我可以在 [ngClass] 中使用条件（三元）运算符以及 Angular2 中的多个类条件吗？

Posted 2023-02-23

【中文标题】我可以在 [ngClass] 中使用条件（三元）运算符以及 Angular2 中的多个类条件吗？

【英文标题】：Can I use conditional (ternary) operator in [ngClass] alongside with multiple class conditions in Angular2?

【发布时间】：2020-03-18 14:19:32

【问题描述】：

我可以使用多个这样的条件：

<div [ngClass]="'checked': isChecked, 'disabled': isDisabled">

还有这样的条件（三元）运算符：

<div [ngClass]="isEmpty ? 'empty-class' : 'not-empty-class'">

有没有办法将多个条件与三元运算符结合起来？类似以下的东西不起作用：

<div [ngClass]="'checked': isChecked, 'disabled': isDisabled, isEmpty ? 'empty-class' : 'not-empty-class'">

一种解决方法是使用以下语法：

<div [class.checked]="isChecked" 
     [class.disabled]="isDisabled"
     [ngClass]="isEmpty ? 'empty-class' : 'not-empty-class'">```

【问题讨论】：

我不明白为什么要在二进制模式下使用三进制。将其拆分为两个二进制文件： 'empty-class': isEmpty, 'not-empty-class': !isEmpty :D

@Roberc 没有特殊原因，有很多变通方法。我已经推荐了一个。我只是想知道它是否可以完成。

附注，我会[ngClass]="stateClasses" 吗？并通过调用执行复杂逻辑并返回所有需要类的串联列表的私有函数来填充我的ngOnInit()。这将评估一次，而不是在每次更改检测时重新评估三元组。

【参考方案1】：

我不明白你为什么要这样做。但是，不，你不能那样做。

根据API，只能提供数组、字符串或对象。因此，在您的情况下，您提供的是对象，它们的键代表类名，值代表条件，即真假。

三元运算符的使用方式是：

<div [ngClass]="'checked': isChecked, 'empty-class': somefunction() ? true: false">

但同样，这只是不必要的代码，应该替换为

<div [ngClass]="'checked': isChecked, 'empty-class': somefunction()">