angular - 离子角度下拉列表

Question

我的下拉列表有问题。我不明白如何扩展和隐藏列表。有没有人知道需要添加什么，最好不使用第三方库？

我的想法是我们有一个列表，每个列表的右侧是一个按钮。单击按钮时，将在单击按钮的列表下方打开一个列表

list0 ----- button0
list1 ----- button1 (click)
- list1.1
- list1.2
list3 ----- button3
list4 ----- button4 (click)
- list4.1
- list4.2
- list4.3

services.page.html：

<ion-content class="ion-padding">
  <ion-list *ngFor="let e of services">
    <ion-item-divider>
      <ion-label>{{e.Name}}</ion-label>
    </ion-item-divider>
    <div *ngIf="e.ListServices != null">
      <ion-item *ngFor="let g of e.ListServices">
        <ion-label>{{g.Description}}</ion-label>
      </ion-item>
    </div>
  </ion-list>
</ion-content>

JSON：

[
   {
      "GuidServicesId":"9647d79b-2b10-4e7d-bd26-199cda4da4aa",
      "Name":"asd",
      "ListServices":[
         
      ]
   },
   {
      "GuidServicesId":"1760d99a-fe30-4573-885f-1e0dabc97c6e",
      "Name":"asda",
      "ListServices":[
         {
            "GuidListSevicesId":"9b45ffe1-7a50-430b-b1ba-57d24e4ae877",
            "Description":"testlistr",
            "consultationRequests":[
               
            ],
            "ServicesId":"1760d99a-fe30-4573-885f-1e0dabc97c6e"
         },
         {
            "GuidListSevicesId":"fec5b5ca-34ad-41bc-aa1d-a0727d3f48df",
            "Description":"asdasdas",
            "consultationRequests":[
               
            ],
            "ServicesId":"1760d99a-fe30-4573-885f-1e0dabc97c6e"
         },
      ]
   }
]

理想情况下，这样做，但几乎没有希望这样做

标签： angularlistionic-framework

Answer 1

最简单的方法是使用 ngIf，如

<button (click)="showList=!showList">Click me</button>
<div *ngIf="showList"> 
   <ion-list  *ngFor="let e of services">
     ...
   </ion-list>
</div>