项目列表下拉以显示列表

Question

我有一个列表，该列表中的项目将有一个向下箭头，点击第一个项目中的箭头，带有复选框的子列表将下拉。并且在点击第一个列表的主列表子列表中的第二个项目时应该关闭，并且应该显示2n个项目的子列表。

<ion-grid>
    <ion-row>
        <ion-label>'Sex'</ion-label>
        <ion-icon name="ios-arrow-forward" (click)="arrowdown()" *ngIf="dropdown"></ion-icon>
        <ion-icon name="ios-arrow-down" (click)="arrowRight()" *ngIf="!dropdown"></ion-icon>
</ion-row>
 <ion-row >
      <ion-col *ngIf="!dropdown">
        <ion-item  *ngFor=" let item of GetTags; let i=index ">
           <ion-label>{{item.Sex}}</ion-label>
            <ion-checkbox color="dark"></ion-checkbox>
         </ion-item>  
       </ion-col>
 </ion-row>

通过这种方式，我有3个不同的网格，如颜色，大小等

dropdown: boolean = true;

 arrowdown(){
        this.dropdown = false;
    }
    arrowRight(){
        this.dropdown = true;
    }

dropdownModel = [
    {
        size: 1,
        label: 'Dresses',
        selected: false, // optional
        color: '#336699' // optional
    },
    {
        size: 2,
        label: 'Jeans',
        selected: false, // optional
        color: '#336699' // optional
    },
    {
        size: 3,
        label: 'Bags',
        selected: false, // optional
        color: '#336699' // optional
    },
    {
        size: 4,
        label: 'Blazzer',
        selected: false, 
        color: '#336699' 
    }

];