Может ли ngClass использовать тернарный оператор в Angular 2?

В Angular 1 код ниже работает хорошо.

<div ng-class="$varA === $varB ? 'css-class-1' : 'css-class-2'">

Но когда я пытаюсь сделать подобное в Angular 2. Это не работает.

Я уже добавил directives: [NgClass]

<div [ngClass]="varA === varB ? 'css-class-1' : 'css-class-2'">

Как писать в Angular 2, спасибо!

EDIT: Это была моя ошибка, я случайно добавил { } к целому varA === varB ? 'css-class-1' : 'css-class-2'. Таким образом, ngClass все еще может использовать тройной оператор в Angular 2.

Ответ 1

Да. То, что вы написали, работает:

<div [ngClass]="varA === varB ? 'css-class-1' : 'css-class-2'">

Plunker

Результат выражения в правой части должен оцениваться одним из следующих:

строка имен классов CSS с разделителями пространства (это то, что возвращает ваше выражение)
массив имен классов CSS
Объект с именами классов CSS в виде ключей и булевыми значениями

Возможно, у вас была другая ошибка в вашем коде?

Ответ 2

<div [ngClass]="{'css-class-1':varA === varB, 'css-class-2': varA !== varB}">

См. также https://angular.io/api/common/NgClass

Ответ 3

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

Для тернарного оператора используйте:

[ngClass]="condition1==condition2?'class-1':'class-2'"

Для использования нескольких условий:

[ngClass]="{'class-1':condition1==condition2, 'class-2': condition3==condition4}"

Thnks...