角2動的消耗ネストされたリスト

Question

私はこの動的リストをngForで作成しました。私が項目をクリックすると、その項目に対してのみ、新しい動的リストで展開したいと思う。私の次のコードでは、最初のリストのすべての項目を使います。私はそれがなぜ起こっているのか理解していますが、解決方法はわかりません。

は、ここに私のコード

<ul *ngFor="let p of portList"> 
    <li (click)="setONUList(p.name)" id="{{ p.name }}"><img src="app/resources/{{ p['oper-status'] }}.png" class="myimage"/>{{ p.name}}</li> 
     <ol *ngFor="let onu of portONUList"> 
     <li><img src="app/resources/{{ onu['oper-status'] }}.png" class="myimage" />{{ onu.name}}</li> 
     </ol> 

    </ul> 

非常に参考になるこれを解決する方法任意のアイデアがあります。

Answer 1

はJSON形式にする必要があります親とたchildListとリストとの関係がなければなりません。私は、サブアレーは、すべてのアイテムのために示されている同じであることを理解するものから

<ul> 
     <li ng-repeat="item in parent" ng-click="showChilds(item)"> 
      <span>{{item.name}}</span> 
      <ul> 
       <li ng-repeat="subItem in item.subItems" ng-show="item.active"> 
        <span>{{subItem.name}}</span> 
       </li> 
      </ul> 
     </li> 
    </ul> 

サンプルJSON形式

let parent= [ 
     { 
      name: "Item1", 
      subItems: [ 
       {name: "SubItem1"}, 
       {name: "SubItem2"} 
      ] 
     }, 
     { 
      name: "Item2", 
      subItems: [ 
       {name: "SubItem3"}, 
       {name: "SubItem4"}, 
       {name: "SubItem5"} 
      ] 
     }, 
     { 
      name: "Item3", 
      subItems: [ 
       {name: "SubItem6"} 
      ] 
     } 
    ]; 

Answer 2

コードの下に参照してくださいので、ネストされた配列との間には関係がありません外側の配列

私の提案は、実際にので、あなたの外側の配列は次のようになります例えば...例えばexpanded、あなたの配列に新しいプロパティを追加するには、次のようになります。

portList = [{id:1,name:'one',expanded:false},{id:2,name:"two",expanded:false}]; 

そしてあなたのHTML：

<ul *ngFor="let p of portList"> 
    <li (click)="expand(p)">{{ p.name}}</li> 
    <div *ngIf="p.expanded"> 
    <ol *ngFor="let onu of portONUList"> 
     <li>{{ onu.name}}</li> 
    </ol> 
    </div> 
</ul> 

をクリックの上、expandedプロパティ切り替え：クールの

expand(p: any) { 
    p.expanded = !p.expanded; 
} 

をあなたは新しいプロパティを必要とせずにHTML5に頼ることができる「クイック」解決したい場合はE：

<details *ngFor="let p of portList"> 
    <summary>{{p.name}}</summary> 
    <ul *ngFor="let onu of portONUList"> 
     <li>{{ onu.name}}</li> 
    </ul> 
</details> 

はここで両方のオプションを持つplunkerです。