Интерполировать переменную в класс с помощью Angular

Я хотел бы динамически генерировать имя класса для своего элемента. Например, <span class=``icon icon-${route.title}``></span> (здесь пришлось использовать двойные обратные кавычки, но на самом деле это должен быть только один набор обратных кавычек.)

    <ul class = "sidebar-list">
      <li *ngFor = "let route of menuRoutes.items">
        <span class=`icon icon-${route.title}`></span>
        <a routerLink = "/{{route.path}}" routerLinkActive = "active">{{ 'menu.' + route.title | translate}}</a> 
      </li>
    </ul>

css angular string-interpolation

12.03.2019 11:47

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

108

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Попробуй это:

<span class = "icon icon-{{route.title}}"></span>

12.03.2019 11:49

Вы также можете заархивировать это с помощью директивы [нгкласс].

<span [ngClass] = "['icon', route.title]"></span>

12.03.2019 12:16

Другие вопросы по теме

Маршрут Angular 2 к одному и тому же компоненту с разными URL-адресами

Угловой codeGen проблемаDetails.ts

Переместите компоненты Angular в Wordpress

MQTT через сокет Secure Websockets закрылся через минуту — RabbitMQ

Как правильно связать импортированные перехватчики

(Жасмин) Как программно выбрать/передать значение тега <select> и вызвать событие изменения в Angular 4?

Angular – Как динамически загружать templateUrl?

Угловой маршрут загрузки файла вместо разрешения компонента

Тестирование Angular HostBinding для класса css

UI-grid 4.7.1 всегда получается (ошибка: не удалось получить шаблон ui-grid/cellEditor: [object Object])

Интерполировать переменную в класс с помощью Angular

Ответы 2

Другие вопросы по теме

Похожие вопросы