Css Angular 2使用ngClass更改类

在html中，我想更改跨距的css。为此，我通过应用以下设置使用Angular 2的ngClass函数：

应用程序组件.ts

import { CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass } from "angular2/common";

export class AppComponent {
public isOn = true;
public toggle(newState) {
    console.log("newState: "+newState);
      this.isOn = newState;
    };
}

在我的html文件中，我有

<span class="glyphicon glyphicon-plus-sign" [ngClass]="{'glyphicon glyphicon-minus-sign': isOn}" (click)="toggle(!isOn)"></span><span> Child</span>

Child

当我加载我的网页时，图标看起来是正确的（减号）。但是，chrome inspector显示以下css：

<span class="glyphicon glyphicon-plus-sign glyphicon-minus-sign"></span>

<span class="glyphicon-plus-sign"></span>

单击span之后，将完全不显示任何图标，chrom inspector将显示以下css：

<span class="glyphicon glyphicon-plus-sign glyphicon-minus-sign"></span>

<span class="glyphicon-plus-sign"></span>

---

这里的问题是，它应该显示加号图标，但它根本不显示任何图标。我的问题是，上面的代码没有替换现有的，只是添加了另一个类，因此图标没有被替换，但根本没有显示图标？如何替换span的类以显示加号图标？

如果我理解正确，我的建议是在ngClass指令中的

下包含
glyphicon加号
！isOn

条件

---

如果您的类名中有

-

，则必须将

与

ngClass

一起使用。此外，如果您使用的类不止一个，您只需通过逗号分隔即可。

会有什么问题？Eric，请参阅上面的更新。阅读此内容将阐明ngClass的工作原理。谢谢Eric。这很有帮助。我还用一个“活动”类（带蓝色背景）和一个“禁用”类（带背景）尝试了上面的代码，效果如预期。如果添加了一个类，两个引导类（glyphicon和glyphicon加号/减号）的使用似乎效果不好。您指的是什么“您必须将

与

ngClass

一起使用吗？”？你能举个例子吗？@GünterZöchbauer当然可以，比如我的课程是项目聚焦和禁用的。我必须在有破折号的类周围使用单引号<代码>