离子手风琴列表问题

Question

我正在为 Ionic Accordion Accordion 创建我的 ionic 3 移动应用程序，它工作完美，但我有一些小问题。当我在显示 toggleDetails 后单击手风琴列表项时，但我无法单击切换详细信息项。主列表正在关闭，如何解决该问题，您可以理解我的问题，请检查：My Example

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>

WORKING DEMO

离子手风琴列表问题

Ionic Accordion list issue

ionic-framework

ionic2

ionic3

angular

angular5