Angular 2材质嵌套md-list-item [英] Angular 2 material nested md-list-item
本文介绍了Angular 2材质嵌套md-list-item的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
使用Angular 2进行材质设计,尝试在sidenav中获取嵌套列表 我有类似
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>
效果很好,看起来像
现在,当我尝试将其嵌套时,例如
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>
它看起来像
我想实现嵌套列表,可能会折叠. 知道我在做什么错或如何解决吗?
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.
请勿在md-list-item
上执行*ngfor
,而应在div
上执行此操作
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>
产生类似
希望有一天能对某人有所帮助
Hope this helps someone, someday
这篇关于Angular 2材质嵌套md-list-item的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文