带字符串的 NgClass if/else 的语法

Question

我一直在尝试做一些非常简单的事情：

我的组件中有一个名为 sortedBySize 的变量。 sortedBySize 可以等于 ""（空）、"asc" 或 "desc"。

在我的 HTML 中，我正在尝试做一个有条件的 NgClass 语句。我尝试了很多不同的方法，但我永远无法让它发挥作用。这是我的语法：

<Label ng-class="{ sortSelected: sortedBySize === '', sortNotSelected: sortedBySize !== '' }" style="margin-left:1;" class="text-center" width="33%" [text]="'Not sorted'" (tap)="somefunction()"></Label>
<Label ng-class="{ sortSelected: sortedBySize === 'asc', sortNotSelected: sortedBySize !== 'asc' }" style="margin-left:1;" class="text-center" width="33%" [text]="'Asc'" (tap)="somefunction()"></Label>
<Label ng-class="{ sortSelected: sortedBySize === 'desc', sortNotSelected: sortedBySize !== 'desc' }" style="margin-left:1;" class="text-center" width="33%" [text]="'Desc'" (tap)="someFunction()"></Label>

好的，我的 css:

.sortSelected {
  background-color: green;
}

.sortNotSelected {
  background-color: red;
}

我已经用我能想到的许多方法更改了三元语句，但它就是不起作用，我也不知道为什么。当静态添加到常规 class 时，类工作正常。任何帮助将不胜感激。

谢谢。

Answer 1

试试这个方法：

<Label [ngClass]="{ 'sortSelected': sortedBySize === '', 'sortNotSelected': sortedBySize !== '' }" 
       style="margin-left:1;" 
       class="text-center" 
       width="33%" 
       [text]="'Not sorted'" 
       (tap)="somefunction()">
</Label>

带字符串的 NgClass if/else 的语法

Syntax for NgClass if/else with string

ternary-operator

angular2-nativescript

angular