Angular 6侧栏添加的子子菜单不起作用

Question

我尝试在子菜单下添加“我的角度项目”侧边栏，但是它不起作用。我使用了这个dashboard template ， 子菜单不是折叠的， 任何人都知道如何解决该问题

谢谢。

这是我的代码'

sidebar.ts

declare const $: any;
declare interface RouteInfo {
    path: string;
    title: string;
    icon: string;
    class: string;
    children?: any;
}

 export const ROUTES: RouteInfo[] = [
    { path: '/dashboard', title: 'Dashboard',  icon: 'home', class: '',
      children: [
      {
         path: '/child1', title: 'Child Menu 1',  icon: 'home', class: ''
      }
      ] },
    { path: '/class', title: 'Class',  icon: 'description', class: '' },
    { path: '/student', title: 'Students',  icon: 'apps', class: '' },
    { path: '/profile', title: 'Profile',  icon: 'person', class: '' },

];

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {
  menuItems: any[];

  constructor() { }

  ngOnInit() {
    this.menuItems = ROUTES.filter(menuItem => menuItem);
  }
  isMobileMenu() {
      if ($(window).width() > 991) {
          return false;
      }
      return true;
  };
}

sidebar.html

<div class="logo">

        <div class="logo-img">

        </div>


</div>
<div class="sidebar-wrapper" style="margin-top: 2.5rem;">
  <div *ngIf="isMobileMenu()">


    <ul class="nav navbar-nav nav-mobile-menu">
        <li class="nav-item">
            <a class="nav-link" href="#pablo">
                <i class="material-icons">dashboard</i>
                <p>
                    <span class="d-lg-none d-md-block">Stats</span>
                </p>
            </a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link" href="#pablo" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="material-icons">notifications</i>
                <span class="notification">5</span>
                <p>
                    <span class="d-lg-none d-md-block">Some Actions</span>
                </p>
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="#">Mike John responded to your email</a>
                <a class="dropdown-item" href="#">You have 5 new tasks</a>
                <a class="dropdown-item" href="#">You're now friend with Andrew</a>
                <a class="dropdown-item" href="#">Another Notification</a>
                <a class="dropdown-item" href="#">Another One</a>
            </div>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#pablo">
                <i class="material-icons">person</i>
                <p>
                    <span class="d-lg-none d-md-block">Account</span>
                </p>
            </a>
        </li>
    </ul>
  </div>
  <ul class="nav">
        <li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item">
            <a class="nav-link" [routerLink]="[menuItem.path]">
                <i class="material-icons">{{menuItem.icon}}</i>
                <p>{{menuItem.title}}</p>
            </a>
            <ng-container *ngIf="menuItem.children && menuItem.children.length > 0">
                <ul class="nav">
                   <li routerLinkActive="active" *ngFor="let childmenu of menuItem.children" class="{{menuItem.class}} nav-item">
                     <a class="nav-link" [routerLink]="[childmenu.path]">
                       <i class="material-icons">{{childmenu.icon}}</i>
                       <p>{{childmenu.title}}</p>
                      </a>
                   </li>
                </ul>
            </ng-container>
        </li>
    </ul>
</div>