Angular 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

應該有父和的childList和列表之間的關係應該是JSON格式。請參閱下面的代碼

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