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的语法

1 个答案: