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

<div class="class-a" [ngClass]="{'class-b': !person.something}">

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

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

Как мне это сделать?

Я использую угловой 4.

Спасибо!

2
MNY 19 Сен 2017 в 23:09

3 ответа

Лучший ответ

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

[ngClass]="{'class-b': !person.something, 'other-condition': isOther }"
13
Günter Zöchbauer 19 Сен 2017 в 20:10

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

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

[ngClass]="renderClass()"

renderClass() {
  switch(this.user.theme){
    case "dark":
       return "dark-theme"
    case "light":
       return "light-theme"
  }
}
8
bgraham 19 Сен 2017 в 20:34

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

Если вы хотите переключить некоторые классы, такие как text-info или text-danger для тега <i> (

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

) .

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

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

Удачи

0
HamidReza Heydari 13 Июн 2019 в 07:23