css - Angular 2 使用 ngClass 更改类

Question

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

app.components.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>

当我加载我的网页时，图标看起来正确(减号)。但是，chrome 检查器显示以下 css:

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

在我点击 span 之后，根本没有显示任何图标，chrom 检查器显示以下 css:

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

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

Answer 1

如果我理解正确，我的建议是包括 glyphicon-plus-sign在 !isOn 下的 ngClass 指令中条件。

如果你有一个 -在您的类(class)名称中，您必须使用 <className>与 ngClass .此外，如果您使用多个类，您可以简单地用逗号分隔。