Поместите div в красный цвет, используя ngStyle или ngClass

У меня есть «div», и я хотел бы сделать его фон красным, если у пользователя нет места для парковки.

Я безуспешно пытался поставить условие в ngClass и ngStyle.

[ngStyle] = "{'background-color':this.account?.placeAttribute !== 'null' ? 'blue' : 'green' }"

неважно, как?

если placeAttribute == null => красный фон

если placeAttribute == 2 => не красный

angular

11.06.2019 16:41

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Angular и React для вашего проекта веб-разработки?

Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Мое недавнее углубление в Angular

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

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

247

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Попробуй это.

[ngStyle] = "{ backgroundColor: this.account && this.account.placeAttribute ? 'blue' : 'green' }"

на самом деле, я бы хотел, чтобы при this.account.place Attribute == null фон становился красным

— 11.06.2019 17:01

11.06.2019 16:57

Попробуй это :

[ngClass] = "{
             'your-css-class': your-first-condition,
              'your-css-class': your-second-condition
           }"

11.06.2019 17:56

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

Вы можете сделать одно из следующих действий:

[ngClass] = "this.account.placeAttribute == null ? 'red-bg' : 'blue-bg'"

ИЛИ

Создайте метод в своем компоненте следующим образом:

getClassNames(){
    if (this.account.placeAttribute == null){
        let classes = {
            "red-bg": true
        }
        return classes;
    }
    else{
        let classes = { 
            "blue-bg": true
        }

        return classes;
    }
}

Затем в шаблоне:

[ngClass] = "getClassNames()"

Очевидно, что red-bg и blue-bg — это классы css, которые имеют background-color: red и background-color: blue соответственно.

12.06.2019 02:57