Использование директивы ngClass вызывает исключение?

У меня есть небольшой фрагмент кода в моем 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:

ценю это, если вы можете помочь Спасибо

не уверен, что вы пытаетесь здесь сделать. Я полагаю, вы хотите динамически применять определенный класс при выполнении определенных условий

Nilesh Patel 23.12.2020 18:02

Starkbucks, у вас ошибка в синтаксисе [ngClass], см. документацию:angular.io/api/common/NgClass. Если вам нужны условия, зависящие от класса, вы можете использовать {'chart-title-value':(condition1),'text-right':(condition2)}, если класс фиксирован, вы можете использовать простой class = "chart-title-value text-right"

Eliseo 23.12.2020 18:06
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
2
419
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Ваш синтаксис неверен:

<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'}"

Другие вопросы по теме