使用 ngClass 指令抛出异常？

Question

我的 angular 组件 HTML 文件中有一小段代码。它使用 ngClass 指令。不幸的是它不起作用。我在我的项目中使用 angular 5。

在我的组件样式表中（进度-panel.component.scss）

chart-title,
.chart-title-value {
  font-size: 18px;
}

在 HTML 文件中，（进度-panel.component.html）我正在使用 ngClass 指令。

  <div *ngSwitchCase="'currency'" [ngClass]="{'chart-title-value' , 'text-right'}">
       {{ campaign.breakdown.total | pcCurrency }}
     <span class="text-muted">/ {{ campaign.budget | pcCurrency }}</span>
  </div>

但是它抛出一些我能看到的错误

compiler.js:485 Uncaught Error: Template parse errors:

如有帮助，不胜感激谢谢

Answer 1

你的语法错误：

<div *ngSwitchCase="'currency'" [ngClass]="'chart-title-value text-right'">
     {{ campaign.breakdown.total | pcCurrency }}
     <span class="text-muted">/ {{ campaign.budget | pcCurrency }}</span>
</div>

会起作用。

但很奇怪你不只是使用 css class html 扇区而是

<div class="chart-title-value text-right" *ngSwitchCase="'currency'">
     {{ campaign.breakdown.total | pcCurrency }}
     <span class="text-muted">/ {{ campaign.budget | pcCurrency }}</span>
</div>

当我想根据组件值设置内容时，我倾向于只使用 ngClass

<some-element [ngClass]="{'first': componentVariableBoolean, 'second': componentVariableBoolean}">...</some-element>

Answer 2

使用[ngClass]="chart-title-value text-right"代替[ngClass]="{'chart-title-value' , 'text-right'}"

使用 ngClass 指令抛出异常？

using ngClass directive is throwing exception?

angular

angular-directive