Question

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

例如类似的东西（注意：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>

Answer 1

而不是上课.tool-name-active 您可以将班级设为.tool-name.active 然后你可以做以下

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

Answer 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;
}

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

2 个答案: