Динамическое имя класса внутри ngClass в angular 2

Мне нужно интерполировать значение внутри выражения ngClass, но я не могу заставить его работать.

Я пробовал эти решения, которые являются единственными, которые имеют для меня смысл, эти две неудачны с интерполяцией:

<button [ngClass]="{'{{namespace}}-mybutton': type === 'mybutton'}"></button>
<button [ngClass]="{namespace + '-mybutton': type === 'mybutton'}"></button>

Это работает с интерполяцией, но не с динамически добавленным классом, потому что вся строка добавляется как класс:

<button ngClass="{'{{namespace}}-mybutton': type === 'mybutton'}"></button>

Итак, мой вопрос: как вы используете динамические имена классов в ngClass, как это?

Ответ 1

Попробуйте

<button [ngClass]="type === 'mybutton' ? namespace + '-mybutton' : ''"></button>

вместо.

или

<button [ngClass]="[type === 'mybutton' ? namespace + '-mybutton' : '']"></button>

или даже

<button class="{{type === 'mybutton' ? namespace + '-mybutton' : ''}}"></button>

будет работать, но дополнительное преимущество использования ngClass заключается в том, что он не перезаписывает другие классы, которые добавляются каким-либо другим способом (например: директива [class.xyz] или class атрибут и т.д.), поскольку class делает.

ngClass использует три типа ввода

Объект: каждый ключ соответствует имени класса CSS, вы не можете иметь динамические клавиши, потому что key 'key' "key" все одинаковы, а [key] не поддерживается AFAIK.
Массив: может содержать только список классов, никаких условий, хотя троичный оператор работает
Строка/выражение: как обычный атрибут класса

Ответ 2

Этот должен работать

<button [ngClass]="{[namespace + '-mybutton']: type === 'mybutton'}"></button>

но Angular бросает на этот синтаксис. Я бы посчитал это ошибкой. Смотрите также fooobar.com/questions/19063/...

Другие недействительны. Вы не можете использовать [] вместе с {{}}. Либо один, либо другой. {{}} привязывает результат к ngClass результату, который в этом случае не приводит к желаемому результату, потому что объект должен быть передан в ngClass.

Пример плунжера

В качестве обходного пути синтаксис, показанный @A_Sing или

<button [ngClass]="type === 'mybutton' ? namespace + '-mybutton' : ''"></button>

может быть использован.

Ответ 3

Вот пример того, что я делаю для нескольких классов с несколькими условиями:

[ngClass]="[variableInComponent || !anotherVariableInComponent? classes.icon.large: classes.icon.small, editing? classes.icon.editing: '']"

где:
classes - это объект, содержащий строки различных имен classes. например, class.icon.large = "app__icon--large"

Это динамично! Обновления по мере обновления условий.

Ответ 4

Я хочу упомянуть некоторые важные моменты, о которых следует помнить при реализации привязки классов.

    [ngClass] = "{
    'badge-secondary': somevariable  === value1,
    'badge-danger': somevariable  === value1,
    'badge-warning': somevariable  === value1,
    'badge-warning': somevariable  === value1,
    'badge-success': somevariable  === value1 }"

Здесь класс не привязан правильно, потому что должно быть выполнено одно условие, тогда как у вас есть два идентичных класса "badge-warning", которые могут иметь два разных условия. Чтобы исправить это

 [ngClass] = "{
    'badge-secondary': somevariable === value1,
    'badge-danger': somevariable  === value1,
    'badge-warning': somevariable  === value1 || somevariable  === value1, 
    'badge-success': somevariable  === value1 }"