Динамическое имя класса внутри 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?

Пытаться

<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происходит.

Angular 9 Обновление

Новый компилятор Ivy привносит большую ясность и предсказуемость в то, что происходит, когда для одного и того же элемента используются разные типы привязок классов. Об этом подробнее здесь.

ngClass принимает три типа ввода

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

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

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

но Angular использует этот синтаксис. Я считаю это ошибкой. См. Также https://stackoverflow.com/a/36024066/217408

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

Пример Plunker

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

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

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

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

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

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

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

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

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

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

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

  <div *ngFor="let celeb of singers">
  <p [ngClass]="{
    'text-success':celeb.country === 'USA',
    'text-secondary':celeb.country === 'Canada',
    'text-danger':celeb.country === 'Puorto Rico',
    'text-info':celeb.country === 'India'
  }">{{ celeb.artist }} ({{ celeb.country }})
</p>
</div>

Ты можешь использовать <i [className]="'fa fa-' + data?.icon"> </i>