ts 和 html 之间的链接类替换而不是附加答案

【问题标题】：Linking classes between ts and html replaces instead of appendingts 和 html 之间的链接类替换而不是附加
【发布时间】：2020-06-14 20:59:25
【问题描述】：

我遇到了一个奇怪的 Angular 行为......我不知道你们中是否发生过这种情况。

使用双花括号语法应用传统绑定的绑定变量不会按预期工作，它将替换之前已经关联的类而不是附加。

您知道如何连接类而不是替换现有的类吗？

从这个例子可以看出，这里它替换了与材料的mat-raised-button 关联的类。

简单的测试用例：

html

<button mat-raised-button class="myClass">BUTTON</button>
<button mat-raised-button class="{{test}}">BUTTON</button>

.ts

export class AppComponent {
   ...
   test = 'myClass';
   ...
}

css

.myClass {
  background: red;
}

【问题讨论】：

【解决方案1】：

是的，尝试使用来自 Angular 的 ngClass 指令来追加。

【讨论】：

【解决方案2】：

使用ngClass 指令根据条件附加您的类。

<button mat-raised-button ngClass="{{test}}">BUTTON</button>

【讨论】：