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

【问题标题】：ngClass - apply multiple classes from variables?ngClass - 从变量中应用多个类？
【发布时间】：2019-08-16 19:53:16
【问题描述】：

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

传入一个变量很容易

[ngClass]='variable1?.font'

我尝试使用数组传递这些类，因为如果你将类名作为字符串传递，你会这样做

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

但是传入变量它不起作用。

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

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

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

我试图不包括条件。甚至不确定上面的代码是否可以工作，因为代码可能认为它是一个 IF-Else 语句。

正确的语法是什么？

谢谢。

【问题讨论】：

这可以解决你的问题<button [ngClass]='[variable1?.font || '' , variable2?.color || '']'>查看演示
为什么不使用 ngStyle？ angular.io/api/common/NgStyle

标签： angular ng-class

【解决方案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'>

您需要确保不要将任何空值推送到您的示例无法正常工作的数组，因此请确保您推送一个字符串值

这样可以解决你的问题

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

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

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

demo ??

【讨论】：

谢谢。这正是我所需要的。