List ionic2：如何创建一个手风琴，在单击手风琴时显示RESTAPI中的项目列表？

我想在我的ionic2移动应用程序中创建一个手风琴功能，其中我需要显示一个项目列表，这些项目与此处显示的不同，不是手风琴

我看到大部分的资料都提到了ionic2中手风琴的链接。但我的要求完全不同

---

我只需要一个手风琴（不是手风琴列表），它可以显示一个项目列表。我已经尝试过修改上面源代码中给出的一个手风琴的代码。但我发现图标和数据是绑定在其中的。对我来说，我只需要一个图标。单击该图标或标题，我需要生成一个项目列表，这些项目包含在从REST API检索到的对象数组中。

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

它帮助我按照自己的要求制作了一个手风琴

以下是我的单手风琴代码和数据列表： 这是我的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>

大众生活
{{item.name}

这是我的.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
  }
}

从'@angular/core'导入{组件、触发器、状态、样式、动画、转换}；
从“离子角度”导入{NavController，NavParams}；
从'@angular/Http'导入{Http，Headers，RequestOptions}；
@组成部分({
选择器：“页面搜索”，
templateUrl:'search.html'，
风格：[
`
.项目块{
最小高度：0；
过渡：0.09s全线性；
}
`
],
动画：[
触发器（'扩展'[
状态（'true'，样式（{height:'45px'}）），
状态（'false'，样式（{height:'0'}）），
转换（'void=>*'，动画（'0s'）），
过渡（'**'，动画（'250ms缓进-缓出'））
])
]
})
导出类搜索{
popularMovieData:Array=[]；
活动：布尔值；
构造函数（公共navCtrl:NavController、公共navParams:navParams、公共http:http）{
这个.navCtrl=navCtrl；
this.navParams=navParams；
这个.active=false；
}
getPopularMovies（）
{
this.http.post（'输入API url'，{}）.subscribe（resp=>{
this.popularMovieData=resp.data；
},
err=>{console.log（err）；}，
()=>{});
}
切换（）
{
this.active=！this.active
}
}