Использование переменной в условной реализации ngClass

обновить

[ngClass]="expression ? cssClass : null"

или просто

[ngClass]="cssClass"

Пример планкера

оригинал (работает только в Dart)

[ngClass]= {className: expression}

будет работать нормально, когда expression вернет true

Вместо того, чтобы устанавливать условие в своем шаблоне, вы должны привязать его к переменной или функции и вернуть объект вашего класса в свой контроллер.

Шаблон

<!-- From a getter -->
[ngClass]="myClass"

<!-- From a function -->
[ngClass]="myClass(someCondition)"

Контроллер

// As a getter
get myClass(): any {

    return {
        someClass: someTruthyCondition
    }
}

// From a function
myClass(someCondition): any {

    return {
         someClass: someCondition === true
    }
}

Попробуйте код ниже, он работает для меня.

Назначить класс переменной:

class1: string = "class1";
class2: string = "class2";

Стиль:

<style>
.class2 {
    height:50px;
    background-color:red;
    color:white;
    width:100px;            
}
 .class1 {
    height:50px;
    background-color:blue;
    color:white;
    width:100px;
}
</style>

HTML:

<div [ngClass]="1==1?class1:class2">
    Test Class
</div>

Код средства разработки:

Вывод:

Вы должны использовать интерполяцию следующим образом:

<div  class="{{expression?className:null}}" ></div>

Это пример:

<div  class="{{something===anotherThing?className:null}}" ></div>