如何在点击事件中更改glyphicon？

Question

我正在尝试在点击事件上更改glyphicon。从控制台，我发现类设置不正确。

来自检查元素

<span _ngcontent-c2="" class="glyphicon-menu-up" ng-reflect-klass="glyphicon glyphicon-menu-up ar" ng-reflect-ng-class="[object Object]"></span>

这是我在HTML部分所做的代码。

代码：

<ul class="nav third-nav">
    <li appExpandMenu (click)="isCollapsedA=!isCollapsedA">
        <a>
            <span [ngClass] = "{'glyphicon glyphicon-menu-up arrow': !isCollapsedA, 'glyphicon glyphicon-menu-right arrow': isCollapsedA}" class="glyphicon glyphicon-menu-{{sign}} arrow"></span>
            <span class="third-menu-title">Docs</span>
        </a>
    </li>

<ul class="nav third-nav">
        <li appExpandMenu (click)="isCollapsedA=!isCollapsedA">
            <a>
                <span [ngClass] = "{'glyphicon glyphicon-menu-up arrow': !isCollapsedA, 'glyphicon glyphicon-menu-right arrow': isCollapsedA}" class="glyphicon glyphicon-menu-{{sign}} arrow"></span>
                <span class="third-menu-title">Docs</span>
            </a>
        </li>

Answer 1

您应该像这样应用[ngClass]：

[ngClass] ="isCollapsedA ? 'glyphicon glyphicon-menu-right arrow' : 'glyphicon glyphicon-menu-up arrow'"

这也许是您需要的代码。

https://stackblitz.com/edit/angular-ngclass-u5bzma?file=app%2Fapp.component.html