Как использовать [ngClass] для нескольких условий класса Angular4

в настоящее время мой div выглядит так:

теперь 9X_angular2 я хочу иметь другое условие ...

Итак, теперь 9X_html-comments я хочу, чтобы этот div был класса a Если 9X_html-comments что-то class-b Если что-то еще class-c

как 9X_nested-divs мне это сделать?

Я использую angular 4.

спасибо!

3
0

html

angular
3
Общее количество ответов: 3

Ответ #1

Ответ на вопрос: Как использовать [ngClass] для нескольких условий класса Angular4

Добавьте его как свойства в литерал объекта:

[ngClass]="{'class-b': !person.something, 'other-condition': isOther }"

9X_html-comments

15
0

Ответ #2

Ответ на вопрос: Как использовать [ngClass] для нескольких условий класса Angular4

Другой вариант - вернуть строку из компонента, если 9X_html вы считаете, что вам нужна более сложная 9X_divs логика или знаете, что будет только одна. Это 9X_angular4.x может быть более проверено.

Какая бы строка 9X_angularjs2 вы ни вернули, она будет отображена как 9X_divs класс (классы)

[ngClass]="renderClass()"

renderClass() {
  switch(this.user.theme){
    case "dark":
       return "dark-theme"
    case "light":
       return "light-theme"
  }
}

9
0

Ответ #3

Ответ на вопрос: Как использовать [ngClass] для нескольких условий класса Angular4

Этот синтаксис лучше использовать ngStyle Потому 9X_html что, это не завершенный ответ.

Если вы хотите 9X_span переключить некоторые классы, например text-info или 9X_angular text-danger для тега (

some exp ? 'text-info' : 'text-danger'

).

Лучший ответ - массив, а не 9X_angular объект.

[ngClass] = "[some exp ? 'text-info' : 'text-danger', ...]"

Удачи

3
0