在下拉菜单中显示单个项目

Question

我正在尝试创建一个包含项目列表的过滤器，点击列表标题后出现一个下拉框，显示复选框，我使用ngIf隐藏并显示它工作正常但是，我需要的是如果我点击在列表中的第一项上，只有第一项中的复选框应该下拉而不是其他项目。

  <ion-grid>
     <ion-row>
        <ion-label>color</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 colors; let i=index ">
                   <ion-label>{{item}}</ion-label>
                    <ion-checkbox color="dark"></ion-checkbox>
             </ion-item>  
          </ion-col>
        </ion-row>
     </ion-grid>

    <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 sexs; let i=index ">
                <ion-label>{{item}}</ion-label>
                <ion-checkbox color="dark"></ion-checkbox>
             </ion-item>  
            </ion-col>
         </ion-row>
  </ion-grid>

在我的ts档案中

dropdown: boolean = true;
 colors: any = [];
 sexs: any = [];


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

目前我使用了hide，show属性到网格中的所有项目，我需要当我点击颜色时，复选框应该下拉颜色而不是其他项目，如性别，家庭