角2有條件主動類在第二條件不工作

Question

我添加代碼以顯示排序方向以及顏色選擇的列看到plunker

• 如果排序節目向上/向下箭頭：工作
• 如果升序顯示下行活躍色箭頭：ACTIVE不適用
• 如果降顯示了活躍的色彩箭頭：工作

這裏是代碼的應用程序類conditi onally：

<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時，它將刪除相應的類。如果同一個班級在兩種情況下，可能會首先添加，但在下一個條件下，它將被刪除。

可能的解決方案是：

1. 轉變作風類.active-asc, .active-desc {color: red;}，然後分別將它們的條件;

或

添加新的條件'active' : column === 'columnName'