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

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

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

   

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

  

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

Пытаться

  

вместо.

или

  

или даже

  

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


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

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

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

  

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

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

Пример Plunker

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

  

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

  • Как заставить Angular2 связывать компонент в innerHTML
  • Угловой 2 роутер без базового набора
  • Как динамически создавать загрузочные модалы как компоненты Angular2?
  • Как передать данные на угловые маршрутизаторы?
  • Угловой 2 «Компонент-имя» кармы не является известным элементом
  • Страница обновления Angular2 router.navigate обновить
  • Доступ к нескольким просмотрщикам с помощью @viewchild
  • Angular2, * ngIf и локальные переменные шаблона
  • Доступ к firebase.storage () с помощью AngularFire2 (Angular2 rc.5)
  • Связывает Angularjs с новым элементом html динамически
  • Как применять фильтры к * ngFor?
  • Interesting Posts

    Все мои браузеры внезапно не поддерживают файлы Javascript?

    CharacterEncodingFilter не работает вместе с Spring Security 3.2.0

    Как сжечь изображение iso с помощью Windows 8 Consumer Preview для USB-накопителя на Mac OS X

    Как не членские функции улучшают инкапсуляцию

    instanceof – несовместимые условные типы операндов

    ссылка на устаревший элемент: элемент не привязан к документу страницы

    Фрагмент над другим fragmentом

    Ошибка , даже если приложение не установлено

    Как настроить метрики интерфейса для конкретного маршрута в Mac OS X

    Зашифрованные NSData для NSString в obj-c?

    Какие факторы наиболее важны при рассмотрении аспектов производительности материнской платы?

    C ++ Стереть векторный элемент по значению, а не по положению?

    Изменение уровня API Android Studio

    Как я могу зашифровать выбранные свойства при сериализации моих объектов?

    Извлечение широты и долготы перетаскиваемого штыря через API Карт Google V3

    Давайте будем гением компьютера.