ngClass組合兩個表達式類型

Question

使用ngClass我想兩個表達類型，結合它們的數據約束，並與changedetection更新這樣

<div [ngClass]="[test.value | myClassPipe, {'anotherClass': test.isValid}]"></div> 

是語法錯誤，或者這是不可能的？

Answer 1

如果正在myClassPipe中設置isValid屬性，請嘗試爲ngClass創建一個函數。

-component.html

<div [ngClass]="{'anotherClass': checkIsValid(test)}"></div> 

-component.ts

checkIsValid(test: any){ 
    let converted = myClassPipe.transform(test); 
    if(converted.isValid) 
     return true; 
    else 
     return false; 
} 

Answer 2

根據NgClass指南，應用NgClass的好方法是將其綁定到key：value控件對象。該對象的每個鍵都是一個CSS類名稱;如果應該添加類，則其值爲真，如果應該刪除則爲false。

考慮組件的方法，諸如管理三個CSS類的狀態setClasses：

setClasses() { 
    let classes = { 
    saveable: this.canSave,  // true 
    modified: !this.isUnchanged, // false 
    special: this.isSpecial,  // true 
    }; 
    return classes; 
} 

現在，我們可以添加一個NgClass屬性綁定調用setClasses，並設置相應元素的類：

<div [ngClass]="setClasses()">This div is saveable and special</div>