マテリアルデザインで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>
それは次のように見えます
おそらく折りたたみ可能なネストされたリストを実現したいと思います。私が間違っていることやこれにアプローチする方法について何か考えはありますか?
わかりました、将来誰かがこのように立ち往生した場合、それを理解しました。
しないでください*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>
これは次のようなものを生成します
これがいつか誰かに役立つことを願っています
Angular 1.0の場合、次のスニペットを使用します。
<md-list>
<div ng-repeat="category in categories">
<md-list-item>{{category.name}}</md-list-item>
<md-list style="margin-left:50px;">
<div ng-repeat="subcategory in category">
<md-list-item>{{ subcategory.name}}</md-list-item>
</div>
</md-list>
</div>
</md-list>