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

【问题标题】：Conditionally apply generic class name using ngClass in Angular 6在 Angular 6 中使用 ngClass 有条件地应用通用类名
【发布时间】：2019-05-01 15:04:34
【问题描述】：

我有一个如下所示的按钮数组

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的值可以是verified、rejected或default

html 给我一个解析错误

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

无效，我尝试过 [ngClass]="{ [btn.btnClass] : btn.id === status}" ，但没有成功。

我了解解析错误的原因，但无论如何我可以在这里更改一些内容并将 className 设为泛型吗？

请帮忙。提前致谢

【问题讨论】：

该表达式无效，即使在 JavaScript 中...
是的，我知道这一点，如果可能的话，需要一种方法来改变某些东西并使其工作
id 或 status 与应用的类有什么关系？你不能像这样申请btnClass：[ngClass]="{ option.btnClass }"吗？
@TeunvanderWijst btnClass 只有在 status 和 id 的值匹配时才会被应用。Status 值可以是verfied、rejected 或default。所以在默认情况下，什么都不会发生。

标签： javascript angular ecmascript-6 angular6

【解决方案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>

【讨论】：

【解决方案2】：

将您的班级添加为：

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

【讨论】：