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>

状态的值可以被验证，拒绝或默认

html向我抛出一个解析错误，

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

无效，我尝试做[ngClass] =“ {[btn.btnClass]：btn.id === status}”，但徒劳。

我了解解析错误的原因，但是无论如何我是否可以更改某些内容并在此处将className设为通用？

请帮助。预先感谢

Answer 1

尝试一下：

<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>

Answer 2

将您的课程添加为：

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

在Angular 6中使用ngClass有条件地应用通用类名

2 个答案: