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

2 64
angularjs

2 ответа:

попробовать 

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

вместо.

или

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

или даже

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

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

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

105

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

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

но угловые броски по этому синтаксису. Я бы счел это ошибкой. См. также https://stackoverflow.com/a/36024066/217408

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

Plunker пример

как обходной путь синтаксис, показанный @A_Sing или 

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

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

9