Как использовать несколько классов с условием в угловых 2+

Question

Я пытаюсь использовать условие для выбора нескольких классов в [ngClass]:

<td>
<span 
      [ngClass]="{
             'badge badge-success': {{ server.type }} === 'PRODUCTION',
             'badge badge-danger': {{ server.type }} === 'TEST',
             'badge badge-warning': {{ server.type }} === 'DEV'
              }">
</span>
</td>

Я знаю, что [ngClass] не работает с {{}}, я получаю свои данные из приложения restapi django, какой альтернативный способ сделать это? спасибо

Answer 1

Используйте [ { key: class}[ expression ]] для обработки нескольких условий

<span class="badge " ng-class="[{'PRODUCTION':'badge-success', 'TEST':'badge-danger', 'DEV':'badge-warning'}[ server.type]]"></div>

Answer 2

Нет необходимости использовать {{}} с [ngClass], поэтому просто удалите его.

Попробуйте это -

 [ngClass]="{
             'badge badge-success': server.type  === 'PRODUCTION',
             'badge badge-danger':  server.type  === 'TEST',
             'badge badge-warning': server.type  === 'DEV'
              }">