Question

在html中我想改变跨度的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指令中。

如果您的班级名称中包含-，则必须<className>使用ngClass。此外，如果您使用多个课程，则可以通过逗号分隔。

Angular 2使用ngClass更改类

1 个答案: