Связывание классов между ts и html заменяет вместо добавления

Question

Я столкнулся со странным поведением 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;
}

Контрольный пример Stackblitz

Answer 1

Используйте директиву ngClass для добавления ваших классов на основе условий.

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

Answer 2

Да, попробуйте использовать директиву ngClass от Angular для добавления.

https://alligator.io/angular/class-binding-ngclass-angular/