单击特定的 ion-item 按钮会触发 ionic 3 中的其他按钮

Question

假设 item 数组中有 n 个元素。因此，下面的 html 将显示 n 个项目，每个项目都附有箭头下拉单击按钮。

 <div *ngFor="let item of medicineName; let i = index">
  <ion-list>
    <ion-item >
      <ion-thumbnail item-start  >
        <img src="/assets/imgs/tablet.png" class="thumbnail">
      </ion-thumbnail>
      <h2 style="color: #070779;font-weight: bold;">{{item.medicine_name}}</h2>
      <div class = "done" *ngIf="showDiv">
        <ion-icon name="done-all"></ion-icon>
      </div>
      <p>{{item.instruction}} | {{item.days}}</p>
      <button  ion-button clear item-end (click)="toggle()">
       <ion-icon name="arrow-dropup" *ngIf="visible[index]"></ion-icon>
   <ion-icon name="arrow-dropdown" *ngIf="!visible[index]"></ion-icon>
     </button>
     <button ion-button icon-only *ngIf="showBtn" style="width: 30%">SKIP</button>
     <button ion-button icon-only *ngIf="showBtn" (click)="showIcon()" style="width: 30%">TAKE</button>
   </ion-item>
  </ion-list>
</div>

.ts 代码

toggle(index){
  this.visible[index] = !this.visible[index];
if(this.showBtn == true){
  this.showBtn = false;
} else {
  this.showBtn = true ;
}

要求：我只希望特定按钮更改为 visible=true，而不是所有按钮。

问题：当点击相应离子项的箭头Click按钮时，其他离子项不生效。

Answer 1

您只使用一个变量来显示，即visible，因此一旦您单击一个变量，它就会切换到true，并且所有项目都会展开。

您需要有多个变量来处理不同的下拉菜单，将索引添加到您的ngFor，然后将点击处理程序更改为(click)="toggle(index)"

visible: boolean[];    

toggle(index) {
  this.visible[index] = !this.visible[index];
}