Условно применить универсальное имя класса, используя ngClass в Angular 6

Question

У меня есть массивы кнопок, как показано ниже

this.btns = [
 {btnClass: 'primary', btnText: 'Verified', id: 'verfied'},
 {btnClass: 'danger', btnText: 'Rejected', id: 'rejected'}
]

Мой HTML-шаблон имеет этот фрагмент кода

<div  *ngFor="let btn  of btns">
   <button class="lui-button lui-small" 
   [ngClass]="{ btn.btnClass : btn.id === status}">{{btn.btnText}}
   </button>
</div>

Значение status может быть любымпроверено, отклонено или по умолчанию

HTML выдает ошибку синтаксического анализа, поскольку

[ngClass]="{ btn.btnClass : btn.id === status}" 

недопустимо, я попытался сделать [ngClass] = "{[btn.btnClass]: btn.id === status} ", но напрасно.

Я понимаю причину ошибки разбора, но могу ли я что-то изменить и получить className в качестве универсального здесь?

Пожалуйста, помогите,Заранее спасибо

Answer 1

Добавьте ваш класс как:

[ngClass]="btn.id === status ? btn.btnClass : ''"

Answer 2

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

<div *ngFor="let btn  of btns">
    <ng-template let-class="btn.btnClass" [ngIf]="true">
        <button 
      class="lui-button lui-small"
      [ngClass]="{ class : btn.id === status}">
      {{btn.btnText}}
   </button>
  </ng-template>
</div>