如何在点击事件时更改glyphicon图标类？

Question

我在边栏上有一个带有glyphicon图标的子菜单列表。我的一位李单击图标应更改。现在，当我单击一个li时，所有图标都将被更改。

这是我正在处理的代码。我不确定如何解决此问题。

HTML

<ul class="nav third-nav">
    <li appExpandMenu (click)="changeIcon()">
        <a>
            <span class="glyphicon glyphicon-menu-{{sign}} arrow"></span>
            <span class="third-menu-title">Sales</span>
        </a>
    </li>
    <li>...</li>
</ul>
<ul class="nav third-nav">
    <li appExpandMenu (click)="changeIcon()">
        <a>
            <span class="glyphicon glyphicon-menu-{{sign}} arrow"></span>
            <span class="third-menu-title">Report</span>
        </a>
    </li>
    <li>...</li>
</ul>

ts。

export class SidebarComponent implements OnInit {   
    sign = 'up';

    changeIcon(): void {
        if (this.sign == 'up') {
            this.sign = 'right';
        } else {
            this.sign = 'up';
        }
    }
}

Answer 1

这里正在工作 example 的需求，如果您对代码有任何疑问，请随时提出。