隱藏並顯示項目點擊存儲在多個陣列 - ionic 2+/angular 2+

Question

我遇到的問題是不顯示顯示和隱藏功能。問題是能夠爲所選按鈕獲取正確的索引。下面我抓住第二個數組的索引。如果用戶要選擇每個currentItems數組的第一個項目，則所有的第一個項目都會打開和關閉。我想要的只是被選擇關閉和打開的那個。點擊resultInfo數組，我想要顯示itemInfo。

HTML

<div *ngFor="let a of currentItems"> 
    <ion-item-sliding id="rightdiv" *ngFor="let b of a.resultInfo; index as i"> 
     <button ion-item (click)="toggleGroup(i)" [ngClass]="{active: isGroupShown(i)}" class="destInfo"> 
     <h3>click me</h3> 
     </button> 
     <ion-item [class.hidden]="!isGroupShown(i)" *ngFor="let c of b.itemInfo"> 
     <ion-label>{{c.name}}</ion-label> 
     </ion-item> 
    </ion-item-sliding> 
    </div> 

TS

shownGroup = null; 

toggleGroup(group) { 
    if (this.isGroupShown(group)) { 
    this.shownGroup = null; 
    } else { 
    this.shownGroup = group; 
    console.log(this.shownGroup, 'SHOWN GROUP HERE') 
    } 
} 
isGroupShown(group) { 
    return this.shownGroup === group; 
}; 

DATA

currentItems = [ 
    { 
    "time": "a some time", 
    "resultInfo": [ 
     { 
     "about": "some place", 
     "itemInfo": [ 
      { 
      "name": "someName" 
      }, 
     ] 
     } 
    ] 
    }, 
    { 
    "time": "some time", 
    "resultInfo": [ 
     { 
     "about": "some place", 
     "itemInfo": [ 
      { 
      "name": "someName" 
      }, 
     ] 
     } 
    ] 
    } 
] 

Answer 1

您需要保存個別項目的狀態。目前你只需設置一個變量來切換所有的組。

在你ts，添加一個變量來存儲每一個項目的狀態：

toggleGroups: any = {}; 

取出toggleGroup()和isGroupShown()方法，你不需要他們。

更改html到以下幾點：

<div *ngFor="let a of currentItems; index as i"> 
    <ion-item-sliding id="rightdiv" *ngFor="let b of a.resultInfo; index as j"> 
     <button ion-item 
       (click)="toggleGroups['group'+i+'_'+j] = !toggleGroups['group'+i+'_'+j]" 
       [ngClass]="{active: toggleGroups['group'+i+'_'+j]}" class="destInfo"> 
      <h3>click me</h3> 
     </button> 
     <ion-item [class.hidden]="!toggleGroups['group'+i+'_'+j]" 
        *ngFor="let c of b.itemInfo"> 
      <ion-label>{{c.name}}</ion-label> 
     </ion-item> 
    </ion-item-sliding> 
</div> 

這裏是Stackblitz Demo的鏈接。