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

Кутове оновлення 9

Новий компілятор Ivy забезпечує більшу чіткість і передбачуваність того, що відбувається, коли на одному елементі існують різні типи прив'язки класів. Детальніше про це читайте тут.

ngClass займає три типи введення

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

Це має працювати

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

але Кутовий кидає цей синтаксис. Я вважаю це помилкою. Дивіться також https://stackoverflow.com/a/36024066/217408

Інші недійсні. Ви не можете користуватися []разом із {{}}. Або те, або інше. {{}}прив'язує результат, закреслений, що не призводить до бажаного результату в цьому випадку, оскільки об’єкт потрібно передавати ngClass.

Приклад Плункер

Як вирішення синтаксису, показаного @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 }" 

клас тут не є обов'язковим для зобов’язання, оскільки одна умова повинна бути виконана, тоді як у вас є два однакових класи "попередження про значки", які можуть мати дві різні умови. Щоб виправити це

 [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>