动态ngClass名称

Question

我有一个任务要向一个元素添加几个类，其中一个必须是有条件的。我查看了文档，发现了这一点：

<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 

有什么想法可以实现我想要的东西吗？

Answer 1

我最终要使用的几种方法是根据其条件添加类需求：

• 通过[ngClass]="classObj"语法的某些类
• 通过[ngClass]="classArray"
• 通过[class.class-name]="condition"
• 一些通过原始HTML语法class="className"

Answer 2

ngClass 可以接受对象，因此您可以构建对象并将其分配给可接受的属性

组件

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

模板

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

ngClass