Angular 爱奥尼亚手风琴列表问题

我正在为

爱奥尼亚手风琴创建我的
爱奥尼亚3
移动应用程序，手风琴工作得很好，但我有一些小问题。当我在display
toggleDetails
之后单击手风琴师列表项时，但我无法单击toggleDetails项。主列表正在关闭，如何解决该问题，您可以理解我的问题，请检查：

ts

export class SearchPage {
  data: Array<{title: string, details: string, icon: string, showDetails: boolean}> = [];

  constructor(public navCtrl: NavController, public navParams: NavParams) {

    for(let i = 0; i < 10; i++ ){
      this.data.push({
        title: 'Title '+i,
        details: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
        icon: 'ios-add-circle-outline',
        showDetails: false
      });
    }
  }
  toggleDetails(data) {
    if (data.showDetails) {
      data.showDetails = false;
      data.icon = 'ios-add-circle-outline';
    } else {
      data.showDetails = true;
      data.icon = 'ios-remove-circle-outline';
    }
  }
  ionViewDidLoad() {
    console.log('ionViewDidLoad SearchPage');
  }

}

导出类搜索页面{
数据：数组=[]；
构造函数（公共navCtrl:NavController，公共navParams:navParams）{
for（设i=0；i<10；i++）{
这是数据推送({
标题：“标题”+i，
详细信息：“知识产权是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利不可轻视的圣徒，必须为动物的劳动负责。”，
图标：“ios添加圆形轮廓”，
showDetails:错误
});
}
}
切换详细信息（数据）{
if（data.showDetails）{
data.showDetails=false；
data.icon='ios添加圆形轮廓'；
}否则{
data.showDetails=true；
data.icon='ios删除圆轮廓'；
}
}
ionViewDidLoad（）{
log（'IonViewDidLoadSearchPage'）；
}
}

html

<ion-content>
  <ion-list>
    <ion-list-header>
      Ionic 2 Accordion Example.
    </ion-list-header>
    <ion-item padding *ngFor="let d of data" (click)="toggleDetails(d)"><ion-icon color="primary" item-right [name]="d.icon"></ion-icon>
      {{d.title}}
      <div *ngIf="d.showDetails">{{d.details}}</div>
    </ion-item>
  </ion-list>

</ion-content>


离子2手风琴的例子。
{{d.title}}
{{d.details}}
我认为您可以通过将
（单击）=“toggleDetails（d）”
从
离子项目
移动到
离子图标
来解决此问题，如下所示：

<ion-item padding *ngFor="let d of data" >
    <ion-icon color="primary" item-right [name]="d.icon" (click)="toggleDetails(d)"></ion-icon>
    {{d.title}}      
    <div *ngIf="d.showDetails">{{d.details}}</div>
</ion-item>


{{d.title}}
{{d.details}}

先生，理解，感谢您的解决方案和宝贵的支持time@core114，很高兴你有了这个想法，顺便说一句：）