Angular 2 材质嵌套 md-list-item [英] Angular 2 material nested md-list-item

问题描述

将 Angular 2 与 Material Design 结合使用，尝试在 sidenav 中获取嵌套列表我有像

这样的代码

<md-导航列表><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-导航列表><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>

看起来像

我想实现嵌套列表，可能是可折叠的.知道我做错了什么或如何解决这个问题吗?

解决方案

好吧，想通了，如果以后有人像这样卡住了.

不要在md-list-item上做*ngfor，而是在div上做，就像这样

 <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>

</md-list>

</md-list>

产生类似

的东西

希望有一天这对某人有所帮助

Using Angular 2 with material design, trying to get nested lists in sidenav I have code like

<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>

which works fine and looks something like

Now When i try to nest it, like

<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>

It appears like

I want to achieve nested list, probably collapsible. Any idea what am i doing wrong or how to approach this ?

解决方案

Ok, figured it out, if someone in future gets stuck like this.

Do no *ngfor on md-list-item, rather do it on div, like this

            <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>

which produces something like

Hope this helps someone, someday

这篇关于Angular 2 材质嵌套 md-list-item的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！