离子手风琴列表问题

Question

im创建我的ionic 3 Ionic Accordion Accountion移动应用程序的工作非常完美，但是我有一些小问题。当我在显示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');
  }
}

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>

Answer 1

我认为您可以通过将(click)="toggleDetails(d)"从ion-item移动到ion-icon，这样：

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

工作演示