ionic2:如何创建一个手风琴，该手风琴在单击手风琴时显示来自 REST API 的项目列表

Question

我想在我的ionic2移动应用程序中创建一个手风琴功能，我需要显示一个项目列表，这些项目不是手风琴，不像这里显示的手风琴 https://github.com/mahmoudissmail/ionic2Accordion

我已经看到大多数来源都提到了ionic2中手风琴的链接.但我的要求完全不同。

我只需要一个手风琴(不是手风琴列表(，它可以显示项目列表.我尝试修改上述源中给出的代码以使用一个手风琴.但我发现的是图标和数据绑定在其中。对我来说，我只需要一个图标。单击该图标或标题时，我需要生成从 REST API 检索的对象数组中的项目列表。

Answer 1

我很高兴在互联网上搜索了很多之后终于得到了答案。我不知道为什么这个链接没有出现，这是由官方ionic2团队提供的。

https://forum.ionicframework.com/t/accordion-component-not-found-in-ionic-2/77576

它帮助我创建了我要求的手风琴.

这是我的单个手风琴的代码，其中包含数据列表：这是我的 HTML 文件。

<ion-item color="danger" (click)="toggle()">
  PopularMovies
  <ion-icon item-left name="add"></ion-icon>
</ion-item>
<ion-item *ngFor="let item of popularMovieData" [@expand]="active">{{item.name}}</ion-item>

这是我的 .ts 文件

 import { Component,trigger, state, style, animate, transition } from '@angular/core';
import { NavController, NavParams} from 'ionic-angular';
import { Http, Headers, RequestOptions } from '@angular/http';
@Component({
  selector: 'page-search',
  templateUrl: 'search.html',
  styles:[
  `
  .item-block{
    min-height: 0;
    transition: 0.09s all linear;
  }
  `
  ],
  animations: [
    trigger('expand', [
      state('true', style({ height: '45px' })),
      state('false', style({ height: '0'})),
      transition('void => *', animate('0s')),
      transition('* <=> *', animate('250ms ease-in-out'))
    ])
  ]
})
export class Search {
popularMovieData:Array<any>=[];
active: boolean;
  constructor(public navCtrl: NavController, public navParams: NavParams,public http:Http) {
    this.navCtrl=navCtrl;
    this.navParams=navParams;
   this.active=false;
}
  getPopularMovies()
  {
    this.http.post('enter the API url',{}).subscribe(resp=>{ 
    this.popularMovieData = resp.data;
    },
    err=>{console.log(err);},
    ()=>{});
  }
   toggle() 
   {
   this.active = !this.active
  }
}