单击时隐藏和显示存储在多个数组中的项目 - 离子 2+ / 角度 2+答案

【问题标题】：Hide and Show item on click stored in multiple arrays - ionic 2+ / angular 2+单击时隐藏和显示存储在多个数组中的项目 - 离子 2+ / 角度 2+
【发布时间】：2018-02-03 03:29:00
【问题描述】：

我遇到的问题是没有显示显示和隐藏功能。问题是能够获取所选按钮的正确索引。下面我正在获取第二个数组的索引。如果用户选择每个 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>

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;
};

数据

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

【问题讨论】：

在你的函数中 this.c = currentItems[index].resultInfo[0].itemInfo[0]

标签： angular typescript ionic-framework ionic2 ionic3

【解决方案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的链接。

【讨论】：