ngClass загружает только один класс из строки классов

Question

Я использую ngClass (Angular 2) для загрузки строки классов, если условие истинно, и другой строки классов, если условие ложно!

Вот код:

<label [ngClass]="{'btn btn-success m-btn m-btn--pill': value==2, 'btn btn-outline-success m-btn m-btn--pill':  value!=2}" >

Нет проблем (но тот же код, что и у первой части в ngClass): Вторая часть работает хорошо, когда условие value!=2 и загружаемая строка класса btn btn-outline-success m-btn m-btn--pill

Проблема: Первая часть, где условием является value==2, а загружаемая строка классов - btn btn-success m-btn m-btn--pill, но единственный загруженный класс (из многих доступных в строке) - btn-success.

Я не могу понять, почему ngClass загружает только один класс, оставляя другие классы в строке!

Может кто-нибудь, пожалуйста, дайте мне знать, если я делаю что-то не так или это ошибка в angular 2?

Answer 1

Я знаю, что этот вопрос старый, но, по-видимому, все еще актуален для углового 7, поскольку я только что столкнулся с той же проблемой.

Каким-то образом angular требует, чтобы вы переместили общие классы между 2 операторами класса ng (где всегда один или другой true) в атрибут класса. В противном случае обычные не будут работать в первой части утверждения.

Таким образом, решение указанной выше проблемы:

<label class="btn m-btn m-btn--pill" [ngClass]="{'btn-success': value==2, 'btn-outline-success':  value!=2}" >