Angular 2如何使用变量作为ngClass的值答案

【问题标题】：Angular 2 how do I use a variable for the value of ngClassAngular 2如何使用变量作为ngClass的值
【发布时间】：2026-01-30 06:20:06
【问题描述】：

我想为 ngClass 的值使用一个变量，该变量将被添加到类列表中。我的用例是我有一个图像精灵的集合，有一个基本精灵，然后是一个活动状态，它与基本精灵具有相同的文件名，只是在末尾添加了“-active”。我通过为元素提供与所需精灵文件名匹配的类来将精灵添加到文档中。当用户将鼠标悬停在元素上时，我需要在两个精灵之间来回切换。我该怎么做？

例如这样的事情（注意：tool.name === 要显示的精灵的文件名）：

<li *ngFor='let tool of tools' (mouseenter)='tool.isActive = true' (mouseleave)='tool.isActive = false'>
  <span [ngClass]='{ {{tool.name}}-active: tool.isActive, {{tool.name}}: !tool.isActive }'>{{tool.name}}</span>
</li>

【问题讨论】：

您是否需要在真/假之间动态切换 isActive 之类的东西？
不，每个 tool.name 都匹配一个精灵的文件名，此外每个精灵还有一个同名但添加了 -active 的第二个文件。我需要在悬停时在两个精灵之间切换。

标签： angular ng-class

【解决方案1】：

而不是上课.tool-name-active 您可以将您的课程设置为.tool-name.active 然后您可以执行以下操作

<li *ngFor='let tool of tools'>
  <span class="{{tool.name}}" [ngClass]='{active: isActive}'>{{tool.name}}</span>
</li>

【讨论】：

.-active 是一个精灵名称，所以我需要整个字符串。例如，如果 isActive 为假，则最终为 .color-btn，如果 isActive 为真，则为 .color-btn-active。 .color-btn.active 只会加载名为 color-btn 的精灵。
我的意思是，如果可能的话，您可以将您的 css 类名称从 .color-btn-active 更改为 .color-btn.active。
它不是，正如我所说我需要类是 .color-btn-active 以便它匹配 color-btn-active.png 我还需要 .color-btn 以便它匹配 color- btn.png。如果我没有与文件名匹配的这些类，则不会加载精灵。
但是就像你说的那样，试试 FORCE JB 的解决方案，它可能对你有用，但不推荐。其他方法是： 1. 将您的条带重命名为 color-btn.active.png 2. 如果您使用 css 加载条带，请发布您的 css 帮助，我们可以帮助调整它。

【解决方案2】：

也许使用函数返回 ngClass 数组会有所帮助。

<li *ngFor='let tool of tools'><span [ngClass]='chkClass(tool)'>{{tool.name}}</span></li>


public chkClass(item:any){
    let newClass = {};
     newClass[item.name+ '-active'] = true;
     newClass[item.name] = false;
     return newClass;
}

【讨论】：