Angular 2材料嵌套md-list-item

Question

使用Angular 2和材料设计,尝试在sidenav中获取嵌套列表我有类似的代码

<md-sidenav #sidenav class="sidenav" mode="over" opened>
    <md-nav-list>
           <md-card class="user-card">
               <md-card-header>
                 <div md-card-avatar class="user-avatar"></div>
               </md-card-header>
           </md-card>
      <md-divider></md-divider>
      <md-list-item *ngFor="let category of ategories">
         <a md-line>{{ category.name }}</a> 
      </md-list-item>
    </md-nav-list>
</md-sidenav>

哪个工作正常,看起来像

现在,当我试图嵌套它时,就像

<md-sidenav #sidenav class="sidenav" mode="over" opened>
    <md-nav-list>
           <md-card class="user-card">
               <md-card-header>
                 <div md-card-avatar class="user-avatar"></div>
               </md-card-header>
           </md-card>
      <md-divider></md-divider>
      <md-list-item *ngFor="let category of ategories">
         <a md-line>{{ category.name }}</a>
         <md-list-item *ngFor="let subcategory of category.subcategories">
            <a md-line>{{ subcategory.subcategory }}</a>
         </md-list-item>
      </md-list-item>
    </md-nav-list>
</md-sidenav>

看起来像

我想实现嵌套列表,可能是可折叠的.知道我做错了什么或如何处理这个问题？

Answer 1

好吧,想通了,如果将来有人像这样陷入困境.

不要不*ngfor上md-list-item,而做到这一点的div,像这样的

            <md-list>
                <div  *ngFor="let category of practice_categories">
                    <md-list-item>{{category.category}}</md-list-item>
                    <md-list style="margin-left:30px;">
                          <div *ngFor="let subcategory of category.subcategories">
                            <md-list-item>{{ subcategory.subcategory }}</md-list-item>
                          </div>
                    </md-list>
                </div>
            </md-list>

产生类似的东西

希望有一天能帮助某人