动态 ngClass 名称

Question

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

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

但问题是另一个 class 必须有一个来自变量的动态名称，我想做这样的事情：

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

我遇到了这个错误

Unexpected token [, expected identifier, keyword, or string

任何想法如何实现我想要的？

Answer 1

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

组件

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

模板

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

Answer 2

我最终得到的是使用几种方法来添加类对其条件的需求：

Dynamic ngClass name