angular - 使用 ng-bootstrap 的 metismenu 折叠功能

Question

我在 Angular 4 中使用 metismenu 和 ng-bootstrap。我面临的问题是 aria-expanded 设置不正确。

以下是我在 Angular 中的代码。

<ul class="nav metismenu" id="side-menu">
<ng-template [ngIf]="user.haveAccess('menu1')">
    <li [ngClass]="{'active': !isCollapsed}">
        <a (click)="onCollapsed()" [attr.aria-expanded]="!isCollapsed">Menu1</a>
        <ul class="nav nav-second-level" [ngbCollapse]="isCollapsed" [attr.aria-expanded]="!isCollapsed">
            <li><a href="#">SubMenu1</a></li>
            <li><a href="#">SubMenu2</a></li>
            <li><a href="#">SubMenu3</a></li>
        </ul>
    </li>
</ng-template>
</ul>

下面是第一次加载页面时的html，和预期的一样。

<ul class="nav metismenu" id="side-menu">
<li _ngcontent-c2="" ng-reflect-ng-class="[object Object]">
    <a _ngcontent-c2="" aria-expanded="false">Menu1</a>
    <ul _ngcontent-c2="" class="nav nav-second-level collapse" ng-reflect-collapsed="true" aria-expanded="false">
        <li _ngcontent-c2=""><a _ngcontent-c2="" href="#">SubMenu1</a></li>
        <li _ngcontent-c2=""><a _ngcontent-c2="" href="#">SubMenu2</a></li>
        <li _ngcontent-c2=""><a _ngcontent-c2="" href="#">SubMenu3</a></li>
    </ul>
</li>
</ul>

但是当我单击 Menu1 时，菜单会展开。页面变成如下。为什么<a _ngcontent-c2="" aria-expanded="false">Menu1</a>did变为true？

<ul class="nav metismenu" id="side-menu">
<li _ngcontent-c2="" ng-reflect-ng-class="[object Object]" class="active">
    <a _ngcontent-c2="" aria-expanded="false">Menu1</a>
    <ul _ngcontent-c2="" class="nav nav-second-level collapse show" ng-reflect-collapsed="false" aria-expanded="true">
        <li _ngcontent-c2=""><a _ngcontent-c2="" href="#">SubMenu1</a></li>
        <li _ngcontent-c2=""><a _ngcontent-c2="" href="#">SubMenu2</a></li>
        <li _ngcontent-c2=""><a _ngcontent-c2="" href="#">SubMenu3</a></li>
    </ul>
</li>
</ul>

我觉得 metismenu 和 ng-bootstrap 试图同时更新 aria-expanded。这是 metismenu 中的问题还是我在代码中遗漏的任何内容？

请看下面的截图

页面加载时。

当第一次单击 Menu1 时，菜单展开但 aria-expanded 没有更改为 true <a _ngcontent-c2="" aria-expanded="false">Menu1</a>。

当第二次单击 Menu1 时，菜单折叠和展开非常快。

第三次单击 Menu1 时，菜单无法折叠，但 css 已折叠。