Question

使用ngClass我正在尝试组合两种表达式类型，以便它们是数据绑定并使用changedetection更新，如下所示

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

语法错误还是不可能？

Answer 1

根据NgClass指南，应用NgClass的一种好方法是将其绑定到键：值控制对象。对象的每个键都是一个CSS类名;如果要添加类，则其值为true;如果应删除该类，则为false。

考虑一个组件方法，例如setClasses，它管理三个CSS类的状态：

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>

Answer 2

如果在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; 
 }

ngClass结合了两种表达类型

2 个答案: