list - 在ionic 3中单击新项目时如何自动关闭手风琴列表中的项目

Question

这是我的 category.html 文件。我希望我的项目在单击打开新项目时自动关闭。

<ion-header>
  <ion-navbar>
   <ion-title>Category</ion-title>
  </ion-navbar>
 </ion-header>
 <ion-content>
   <ion-list class="accordion-list">
   <!-- First Level -->
     <div *ngFor="let item of information;let i = index">
       <ion-list-header no-lines no-padding>
       <!-- Toggle Button -->
         <button  ion-item (click)="toggleSection(i,item.id)" detail-none 
          [ngClass]="{'section-active': item.open, 'section':!item.open}">
         <ion-icon item-left name="add" *ngIf="!item.open"></ion-icon>
         <ion-icon item-left name="close" *ngIf="item.open"></ion-icon>
            {{ item.name }}
         </button>
      <ion-list *ngIf="item.open" no-lines>
          <!-- Second Level -->
           <div *ngFor="let child of childd; let j = index">
          <ion-list-header *ngIf="child.count>1" no-padding>
            <!-- Toggle Button -->
            <button ion-item (click)="moveListPage(child.id,child.name)"  
             class="child" detail-none>
              {{ child.name }}
            </button>
            </ion-list-header>
          </div>
          </ion-list>      
          </ion-list-header>
          </div>
          </ion-list>
          </ion-content>

这是我的 category.ts 文件。我正在使用 woocommerce rest API 获取动态类别。希望一切正常，我遇到的问题是，当打开列表中的另一个项目时，前一个项目没有关闭。我已经搜索了很多，但得到了令人满意的结果。请帮我！！！！

let loading = this.loadingCtrl.create({
  spinner:'dots'
});  
loading.present();  
setTimeout(() => {      
  loading.dismiss();
}, 6000);

this.WooCommerce = WC({
  url: "http://wowvegetables.com",
  consumerKey: "ck_a0b262448f5bacc9599ec992caafbd8812dab0e5",
  consumerSecret: "cs_8af477cd84a65cfdac4ee42e0080fea4e4131807",
  wpAPI: true,
  version: "wc/v2"
});    
this.WooCommerce.getAsync('products/categories?parent=0').then((result) => {     
  console.log(JSON.parse(result.toJSON().body));
  this.information = JSON.parse(result.toJSON().body);
  console.log(this.information);      
  return JSON.parse(result.toJSON().body);        
}, (err) => {
  console.log(err)
})}
  cllapi(id){
  this.id=id; 
this.WooCommerce.getAsync("products/categories?per_page=70&parent="+ 
this.id).then((result) => {     
  console.log(JSON.parse(result.toJSON().body));
  this.childd = JSON.parse(result.toJSON().body);
  console.log(this.childd);      
  return JSON.parse(result.toJSON().body);       
}, (err) => {
  console.log(err)
})

}

  ionViewDidLoad() 
  {
   console.log('ionViewDidLoad CategoryPage');  }
   toggleSection(i,id) {
   this.cllapi(id);
   this.information[i].open = !this.information[i].open;} 
   moveListPage(id,name) {
  this.navCtrl.push(ListingtabPage, {
  id: id,
    name:name
 });
 }

 }

标签： listionic-frameworkionic3