Динамическое имя ngClass

У меня есть задача добавить к элементу несколько классов, один из них должен быть условным. Я посмотрел в документах и ​​нашел это:

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

Но проблема в том, что другой класс должен иметь динамическое имя из переменной, я хотел сделать что-то вроде этого:

[ngClass]="{
        [menuItem.class]: true,
        'open': router.url.split('/')[1] === menuItem.path
      }">

И я получил эту ошибку

Unexpected token [, expected identifier, keyword, or string

Любые идеи, как реализовать то, что я хочу?


angular angular-directive ng-class
person Mordechai Dror    schedule 05.11.2018    source источник

Ответы (2)


arrow_upward
2
arrow_downward

в итоге я использовал несколько способов добавить спрос на классы по его условиям:

  • некоторые классы через синтаксис [ngClass]="classObj"
  • некоторые через [ngClass]="classArray"
  • некоторые через [class.class-name]="condition"
  • некоторые с помощью ванильного синтаксиса HTML class="className"
person Mordechai Dror    schedule 21.04.2020

arrow_upward
0
arrow_downward

ngClass может принимать объект, поэтому вы можете создавать объект и назначать его свойству, и это приемлемо

составная часть

classObj = {hover:true , 'drop-shadow underline' : false}

шаблон

<div [ngClass]="classObj"></div>

ngClass

person malbarmavi    schedule 05.11.2018
comment
Проблема в том, что у меня есть массив menuItems в компоненте и я перебираю его только в шаблоне. На самом деле я не хочу повторять три раза: в компоненте для создания массива классов, после него в шаблоне один раз для вывода элементов и еще раз для вывода их классов... - person Mordechai Dror; 14.11.2018