Angular ngClass多个三元运算符条件

Question

在角度ngClass指令中放置多于1个三元条件类的最佳方法是什么，其中值是类名？

我已经尝试了一些变体，但我总是得到一个编译错误：

ng-class="$index > 2 ? 'l3 m4 s12 medium' : 'l4 m6 s12 medium', true ? 'red':'blue'

ng-class="{$index > 2 ? 'l3 m4 s12 medium' : 'l4 m6 s12 medium', true ? 'red':'blue'}

Answer 1

我首选的ng-class语法如下，因为它明确指出要添加哪些类。

ng-class={ 'className' : yourConditionHere, 'class2' : anotherConditionHere }

试一试。

Answer 2

虽然我完全赞同@SamuelMS明确显示你的班级名字......

如果你真的想要使用多个三元运算符（或者只是好奇），你可以这样做：

ng-class="($index > 2 ? 'l3 m4 s12 medium' : 'l4 m6 s12 medium') + ' ' + (true ? 'red' : 'blue')"

Answer 3

如果您使用的是angular 8+，则应该可以进行以下操作。

[ngClass]="{'css-class' : condition1 === true || condition2 === true }">