隐藏并显示项目点击存储在多个阵列 - 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的链接。