ionic2：如何创建一个手风琴，在点击手风琴时显示来自 REST API 的项目列表？答案

【问题标题】：ionic2: How to create an accordion which shows a list of items from a REST API on click of the accordion?ionic2：如何创建一个手风琴，在点击手风琴时显示来自 REST API 的项目列表？
【发布时间】：2017-08-15 10:08:11
【问题描述】：

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

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

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

【问题讨论】：

标签： list angular typescript ionic2 accordion

【解决方案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
  }
}

【讨论】：