单击特定的离子项目按钮会触发离子3中的其他按钮

Question

Lets suppose there are n elements in the array of item. So, the below html will display n items with arrow-dropup click button attached to every item.

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

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

Requirement : I only want the particular button change with visible=true, and not all the buttons.

Problem : When clicking on arrow Click button of respective ion-item, the other ion-item does not get effected.

Answer 1

You're only using one variable for your display ie visible , therefore once you click on one, it's toggled to true and all the items show expanded.

You need to have multiple variables to handle the different dropdowns, add an index to your ngFor , and then change click handler to (click)="toggle(index)"

visible: boolean[];    

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