web-dev-qa-db-ja.com

Angular 2マテリアルネストされたmd-list-item

マテリアルデザインで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>

これは正常に動作し、次のようになります

enter image description here

今私がそれを入れ子にしようとすると、

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

それは次のように見えます

enter image description here

おそらく折りたたみ可能なネストされたリストを実現したいと思います。私が間違っていることやこれにアプローチする方法について何か考えはありますか？

angularangular-materialangular-material2
8
Aishwat Singh

わかりました、将来誰かがこのように立ち往生した場合、それを理解しました。

しないでください*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>

これは次のようなものを生成します

enter image description here

これがいつか誰かに役立つことを願っています

17
Aishwat Singh

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>
3
Layesh Chowdhury