Angular 已实现动态嵌套的“角度材质”菜单，但不会打开“一次一个”菜单列表

我已经实现了动态多级菜单列表使用角材料，但问题是一次一个菜单列表将不会打开。假设菜单列表如下所示，如果我单击菜单列表1，则菜单列表1项显示，然后单击菜单列表2，则菜单列表2打开，但菜单列表1关闭

menu list1 
    menu 1
    menu 2
menu list2  
    menu 1
    menu 2

// menu list code 

<a mat-list-item [ngStyle]="{'padding-left': (depth * 12) + 'px'}" (click)="onItemSelected(item)"
   [ngClass]="{'active': item.route ? router.isActive(item.route, true): false, 'expanded': expanded}"
   class="menu-list-item">
  <mat-icon class="routeIcon">{{item.iconName}}</mat-icon>
  {{item.displayName}}
  <span fxFlex *ngIf="item.children && item.children.length">
    <span fxFlex></span>
    <mat-icon [@indicatorRotate]="expanded ? 'expanded': 'collapsed'">
      expand_more
    </mat-icon>
  </span>
</a>
<div *ngIf="expanded">
  <app-menu-list-item *ngFor="let child of item.children" [item]="child" [depth]="depth+1">
  </app-menu-list-item>
</div>

菜单列表1
菜单1
菜单2
菜单列表2
菜单1
菜单2
//菜单列表代码
{{item.iconName}
{{item.displayName}
进一步扩展