Как я могу создать Аккордеонный список в ионном 2?

Ответ 1

Проверьте демонстрацию аккордеонного списка в ionic 2 на Github:

https://github.com/mahmoudissmail/ionic2Accordion

.html

<ion-content padding>
  <ion-list>
    <ion-list-header>
      Ionic 2 Accordion Example.
    </ion-list-header>
    <ion-item padding *ngFor="let d of data" (click)="toggleDetails(d)"><ion-icon color="primary" item-right [name]="d.icon"></ion-icon>
      {{d.title}}
      <div *ngIf="d.showDetails">{{d.details}}</div>
    </ion-item>
  </ion-list>
</ion-content>

.ts

export class HomePage {

  data: Array<{title: string, details: string, icon: string, showDetails: boolean}> = [];

  constructor(public navCtrl: NavController) {
    for(let i = 0; i < 10; i++ ){
      this.data.push({
          title: 'Title '+i,
          details: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
          icon: 'ios-add-circle-outline',
          showDetails: false
        });
    }
  }

  toggleDetails(data) {
    if (data.showDetails) {
        data.showDetails = false;
        data.icon = 'ios-add-circle-outline';
    } else {
        data.showDetails = true;
        data.icon = 'ios-remove-circle-outline';
    }
  }

спасибо за @LPeteR90.

Ответ 2

EDIT:

Хорошо, думаю, я понял это. Этот учебник мне очень помог, поэтому я бы порекомендовал его прочитать.

Я разделил код на компоненты, где

@Component({
    directives: [DataCards], 
    templateUrl: 'build/pages/data-list/data-list.html'
})

export class DataList {

    public dataList: Data[];

    constructor() {
        this.dataList = [
            new Data('Test title', 'Test Details 1, 2, 3, 4, 5', false), 
            new Data('Second title', 'These are the details for my second title :)', false)
    ];
}

}

и соответствующий HTML

<ion-content class="cards-bg">
   <data-cards [data]="dataList"></data-cards>
</ion-content>

содержит мой пользовательский компонент data-cards. data-cards имеет входной параметр data, через который передается список данных. Чтобы иметь возможность использовать компонент data-cards, вам необходимо установить атрибут directives. data - это класс, содержащий все, что вам нужно, в элементе вашего списка.

export class Data {
    constructor(public title: string, public details: string, public showDetails: boolean) {}
}

Сам компонент data-cards имеет набор атрибутов селектора и входов, поэтому компонент можно использовать из data-list HTML. Функция toggleDetails используется для переключения отображения подробной части записи списка.

@Component({
    selector: 'data-cards',
    inputs: ['data'],
    templateUrl: 'build/pages/data-cards/data-cards.html'
})

export class DataCards {
    public data: Data[];
    constructor() {}

    toggleDetails(data: Data) {
        if (data.showDetails) {
            data.showDetails = false;
        } else {
            data.showDetails = true;
        }
    }
}

Наконец, в файле шаблона data-cards я создаю список данных, используя *ngFor, и сделаю вид элемента информации <div> зависимым от атрибута data showDetails с *ngIf.

<ion-card *ngFor="let d of data">
    <h1>{{d.title}}</h1>
    <button (click)="toggleDetails(d)">+</button>
    <div *ngIf="d.showDetails">{{d.details}}</div>
</ion-card>

Чтобы получить все, чтобы работать, вам нужно будет добавить некоторые импортирования в мой код, так как, например, класс DataList зависит от DataCards и data.

Я также рекомендую изменить стиль шаблона data-cards... Без стиля, он выглядит не совсем точно:)

НЕОБХОДИМЫЙ ОРИГИНАЛЬНЫЙ ОТВЕТ:

Сейчас я работаю над чем-то похожим. Я думаю, что это можно реализовать, используя карты и *ngIf.

Итак, я думаю, что сделаю что-то вроде

<ion-card>
    <h2>Card Title</h2>
    <button (click)="toggleDetails()">+</button>
    <div *ngIf="showDetails">
        Here are some details for the title. 
    </div>
</ion-card>

В toggleDetails() я будет установлена ​​переменная showDetails в значение true...

Это только мой подход (и непроверенный), я собираюсь отредактировать свой ответ, когда закончу его реализацию.