ngClass使用字符串插值来动态更改它

Question

我需要使用变量来更改应用于div的类，但不是全部。在下面的例子中，我需要根据名为color的字符串更改类，所以我尝试了字符串插值。引发错误，只使用变量名称不起作用......我该怎么做？

<div [ngClass]="'progress-bar progress-bar-striped active {{color}}'" role="progressbar" [style.width]="progress">
</div>

Answer 1

试试这个语法：

<div class="progress-bar progress-bar-striped" [ngClass]="[color, size]" >...</div>

也试试这个

<div class="progress-bar progress-bar-striped" [className]="color">...</div>

Answer 2

您的变量位于静态字符串中，无法解析为变量。 请改用：

<div [ngClass]="'progress-bar progress-bar-striped active '+color" role="progressbar" [style.width]="progress">
</div>

注意活动类之后的空格和结束引用之后的+