У меня есть небольшой фрагмент кода в моем HTML-файле углового компонента. он использует директиву ngClass. К сожалению, это не работает. Я использую angular 5 в своем проекте.
в моей таблице стилей компонента (progress-panel.component.scss)
chart-title,
.chart-title-value {
font-size: 18px;
}
в файле HTML (progress-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:
ценю это, если вы можете помочь Спасибо
Starkbucks, у вас ошибка в синтаксисе [ngClass], см. документацию:angular.io/api/common/NgClass. Если вам нужны условия, зависящие от класса, вы можете использовать {'chart-title-value':(condition1),'text-right':(condition2)}
, если класс фиксирован, вы можете использовать простой class = "chart-title-value text-right"
Ваш синтаксис неверен:
<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>
Используйте [ngClass] = "chart-title-value text-right"
вместо [ngClass] = "{'chart-title-value' , 'text-right'}"
не уверен, что вы пытаетесь здесь сделать. Я полагаю, вы хотите динамически применять определенный класс при выполнении определенных условий