我可以将[ngClass]中的条件(三元)运算符与Angular2中的多个类条件一起使用吗？

Question

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

<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'">```

Answer 1

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

根据API，您只能提供数组、字符串或对象。因此，在您的示例中，您提供的是object，其中它们的键表示类名，值表示条件，即the或falsy。

可以使用三元运算符的方法是：

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

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

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