單擊特定的離子項目按鈕會觸發離子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];
}