Question

我为ionic 3创建我的Ionic Accordion移动应用程序Accordion工作正常，但我有一些小问题。当我在显示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

离子手风琴列表问题

1 个答案: