带有Angular 6，Bootstrap 4，HTML，CSS的动态嵌套Sidenav菜单

Question

无法在动态生成（从json）嵌套的sidenav菜单中显示/隐藏菜单选项。 我的技术堆栈-Angular 6，BS 4，HTML，SCSS

使用Material的类似工作示例可用here

我的Angular模型和HTML代码：（无法修复CSS以隐藏/显示由此创建的菜单项）

Model Class

export interface NavItems {
  displayName: string;
  disabled?: boolean;
  iconName: string;
  route?: string;
  children?: NavItems[];
}

<!-- Component.html -->

<span *ngFor="let item of navItems">
  <span *ngIf="item.children && item.children.length > 0">
     <div style="background-color:darkcyan">{{item.displayName}}</div>
        <app-menu-item #menu [items]="item.children"></app-menu-item>
  </span>
  <span *ngIf="!item.children || item.children.length === 0">
       <div style="background-color:crimson">{{item.displayName}}</div>
  </span>
</span>

<!-- app-menu-item  (for iteration) -->

<span *ngFor="let item of items">
  <span *ngIf="item.children && item.children.length > 0">
    <div style="background-color: darkorchid">{{item.displayName}}</div>
    <app-menu-item #menu [items]="item.children"></app-menu-item>
  </span>
  <span *ngIf="!item.children || item.children.length === 0">
    <div style="background-color:chartreuse">{{item.displayName}}</div>
  </span>
</span>