ngClass - 从变量中应用多个类？

Question

我正在尝试通过 ngClass 应用多个 classes。没有条件。我有 2 个变量，它们是 class 名称的字符串。

传入一个变量很容易

[ngClass]='variable1?.font'

我尝试通过使用数组传递这些 classes，因为如果您将 class 名称作为字符串传递

，这就是您这样做的方式

[ngClass]="['btn', 'btn-primary']"

但是传入变量是行不通的。

<button
   [ngClass]='[variable1?.font, variable2?.color]'
>

我在网上看到过传入多个 class 的示例，但它们都涉及包含条件。

[ngClass]="{ btn:true, 'btn-primary':true }"

我尽量不包含条件。甚至不确定上面的代码是否有效，因为代码可能认为它是一个 IF-Else 语句。

正确的语法是什么？

谢谢。

Answer 1

你可以在ts文件中设置类的数组，数组上的任何变化都会反映到ngClass

classesList =[]

ngOnInit() {
 this.classesList.push(variable1.font);
 this.classesList.push(variable1.color);

 setTimeout(() =>{
  this.classesList.push('font-bold')
 },2500);

}

模板

<button [ngClass]='classesList'>

you need to make sure don't push any null value to the array that why your example was not working so make sure you push a string value

所以这可以解决您的问题

<button [ngClass]='[variable1?.font || '' , variable2?.color || '']'>

另一个选项是创建一个字符串值而不是数组

<button [ngClass]='variable1?.font+ ' '+ variable2?.color'>

demo

ngClass - 从变量中应用多个类？

ngClass - apply multiple classes from variables?

angular

ng-class

ngClass - 从变量中应用多个 类？

ngClass - apply multiple classes from variables?

angular

ng-class

ngClass - 从变量中应用多个类？