Sidenav（菜单/子菜单）Angular 4 Material Design 2

Question

我正在使用Angular 4和Material Design（Angular Material）开展项目。我在sidenav菜单上遇到了麻烦。我不知道如何创建子菜单或子类别。我需要在每个残障下面添加（数学，沟通，艺术）。

分类

这是我的代码：

  <md-list-item>
    <md-icon md-list-icon>face</md-icon>
    <span class="sidenav-item-name" md-line>{{category.name}}</span>
    <md-icon>keyboard_arrow_down</md-icon>
   </md-list-item>

我找到了一个菜单示例，但它没有工作：

<a> 
 <md-icon aria-hidden="true">trending_flat</md-icon> 
 <span>Menu</span> <md-icon aria-hidden="true">chevron_right</md-icon> 
</a> 
<md-nav-list> 
 <md-list-item routerlinkactive="open"> 
  <div > <a routerlinkactive="active-link" href="/pages/blank">Sub Menu1</a> 
  </div> 
 </md-list-item> 
 <md-list-item routerlinkactive="open"> 
  <div > <a routerlinkactive="active-link" href="/pages/blank">Sub Menu2</a> 
  </div> 
 </md-list-item> 
</md-nav-list>

我不知道如何正确实施或更多代码或＆＃34; class＆＃34;我需要补充一下。这就是它的外观。

错误菜单：