使用 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>
看起来像
我想实现嵌套列表,可能是可折叠的。
知道我做错了什么或如何解决这个问题吗?
好吧,想通了,如果将来有人遇到这样的问题。
Do no *ngfor
on 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>
这会产生类似的东西
希望有一天这可以帮助某人
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)