Question

我添加了代码以显示所选列的排序方向和颜色，请参阅plunker

如果可排序显示/向下箭头：正在工作
如果升序显示带有活动颜色的向下箭头：ACTIVE NOT APPLYING
如果降序显示带有活动颜色的箭头：工作

以下是有条件的应用程序类的代码：

<i class="fa fa-lg" [ngClass]="{'fa-sort' :  column !== 'ProjectID',  
   ' fa-sort-asc active'  : (column === 'ProjectID' && !isDesc), 
   ' fa-sort-desc active' : (column === 'ProjectID' && isDesc) }" 
    aria-hidden="true"></i>

参见ASC和DESC都有活动类，只能使用DESC真实条件，请参阅plunker了解更多细节。

这里是应用所有条件后的代码：

<i aria-hidden="true" class="fa fa-lg fa-sort"></i>
<i aria-hidden="true" class="fa fa-lg fa-sort-asc"></i> // active missing
<i aria-hidden="true" class="fa fa-lg fa-sort-desc active"></i>

任何想法为什么它表现得像这样：

Answer 1

ngClass中的条件按顺序应用。当ngClass中的条件计算为false时，它将删除相应的类。如果同一个类在两个条件下，可能会先添加，但在下一个条件中，它将被删除。

可能的解决方案是：

将样式类更改为.active-asc, .active-desc {color: red;}，然后分别在条件中应用它们;

或

添加新条件'active' : column === 'columnName'

Angular 2条件类在第二个条件下无效

1 个答案: