ionic3 模擬手風琴布局

 

user.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage({
  name: 'page-user',
  segment: 'path-user',
  priority: 'off'
})
@Component({
  templateUrl: 'user.html',
})
export class User {
  temp:string;
  items=[{
          "name": "張三",
          "age":18
        },{
          "name": "李四",
          "age":20
        },{
          "name": "王五",
          "age":21
      }];

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad User');
  }
  accordion(index,temp) {
      this.temp=temp+index;
  }
}

user.html

<ion-header>

  <ion-navbar>
    <ion-title>用戶</ion-title>
  </ion-navbar>

</ion-header>

<ion-content>
  <ion-list *ngFor="let item of items;let indx=index" style="margin: 0px">
    <ion-item>
       姓名：{{item.name}}
        <ion-icon name="ios-arrow-down" item-right *ngIf="temp=='show'+indx"  (click)="accordion(indx,'hihe')"></ion-icon>
        <ion-icon name="ios-arrow-forward" item-right *ngIf="temp!='show'+indx"  (click)="accordion(indx,'show')"></ion-icon>
    </ion-item>

      <ion-card *ngIf="temp=='show'+indx"  >
        <ion-card-header>
          介紹
        </ion-card-header>
        <ion-card-content>
            年齡：{{item.age}}
        </ion-card-content>
      </ion-card>
  </ion-list>

</ion-content>