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>