Javascript Angular 6[ngclass]-添加一个名为name的类，该类由多个变量组成-直接在[ngclass]上串接

我用的是角度6。以以下变量为例：

var1 = 'my';
var2 = '-';
var3 = 'class';

我怎样才能做这样的事情：

<div [ngClass]='var1 + var2 + var3'></div>

<div class='my-class'></div>

getClassName(): {
 return var1 + var2 + var3;
}

<div [ngClass]='getClassName()'></div>

希望生成的HTML如下所示：

<div [ngClass]='var1 + var2 + var3'></div>

<div class='my-class'></div>

getClassName(): {
 return var1 + var2 + var3;
}

<div [ngClass]='getClassName()'></div>

[编辑]

我知道可以使用辅助函数来获得类名，如下所示：

<div [ngClass]='var1 + var2 + var3'></div>

<div class='my-class'></div>

getClassName(): {
 return var1 + var2 + var3;
}

<div [ngClass]='getClassName()'></div>

---

但我真正想要的是一种使用angular直接在html上实现的方法，您应该使用字符串插值：

<div [ngClass]="`${var1 + var2 + var3}`">

---

嗯，有很多方法可以做到这一点。我想推荐如下：

<div [ngClass]='var1 + var2 + var3'></div>

<div class='my-class'></div>

getClassName(): {
 return var1 + var2 + var3;
}

<div [ngClass]='getClassName()'></div>

希望这有帮助

编辑。您始终可以将数组传递给函数，然后返回字符串。我的示例只是ngClass如何工作的原始示例。此外，您的方法也会起作用：

[ngClass]="var1 + var2 + var3"

---

你期待什么？？连接？？你读过吗？什么不起作用？你可以做到。只要把班级改成ngClass@iamrajshah我在我的帖子上做了一些版本，以便更清楚地知道我在说什么asking@sjahan是的，而且没有接缝，我的箱子坏了。但是{var1+var2+var3}}应该是这样。@trichetriche-non的解决方案提供了接缝，使workIt工作，但是我想要一种方法，使字符串直接连接到html上，而不是使用辅助字符串function@RicardoRocha只需检查我的编辑：stackblitz也会更新