动态 ngClass 名称答案

【问题标题】：Dynamic ngClass name动态 ngClass 名称
【发布时间】：2018-11-05 13:09:29
【问题描述】：

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

<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

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

组件

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

模板

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

【讨论】：

问题是我在组件中有一个数组menuItems，我只在模板中迭代它。我实际上不想迭代三次：在用于创建类数组的组件中，在模板中一次用于输出项目，再一次用于输出它们的类...