Ionic v3:按日期/日列出的组列表

Question

在Ionic的旧版本1中,我能够构建按日期分组的事件列表,如下所示:

<ion-list ng-repeat="(key, value) in events| groupBy: 'event.date'">

  <div class="item item-divider" ng-if="value">
    {{ ::key | event.date }}
  </div>

  <ion-item class="item" ng-repeat="event in value track by event.event.event_id">
    {{ ::event.event.title }}
  </ionic-item>

</ion-list> 

虽然事件对象看起来像这样(事件#1和#3共享相同的日期):

{
  "events": [
    {
      "id": 1,
      "date": "2017-12-26",
      "title": "First event"
    },
    {
      "id": 2,
      "date": "2017-12-30",
      "title": "Second event"
    },
    {
      "id": 3,
      "date": "2017-12-26",
      "title": "Third event"
    },
    {
      "id": 4,
      "date": "2017-12-31",
      "title": "Last event"
    }
  ]
}

这给了我一个存储在"事件"对象中的事件列表,这些事件按"event.date"分组.所以在同一天的所有事件都按项目分隔符分组:

+--------------+
+ 2017-12-26   +
+--------------+
| First event  |
| Third event  |
+--------------+
+ 2017-12-26   +
+--------------+
| Second event |
+--------------+
+ 2017-12-26   |
+--------------+
| Last event   |
+--------------+

如何用Ionic v3实现这一目标？有任何想法吗？

Answer 1

您需要一个管道将数据转换为可以在模板中轻松使用的结构:1个对象数组,包含其他对象数组.您的最终数据应如下所示:

const events = [{
  date: '2017-12-26',
  events: [{
    id: 1,
    title: 'First event'
  }, {
    id: 3,
    title: 'Third event'
  }]
}, {
  date: '2017-12-30',
  events: [{
    id: 2,
    title: 'Second event'
  }]
}, {
  date: '2017-12-31',
  events: [{
    id: 4,
    title: 'Last event'
  }]
}];

这是我尝试在管道上完成的:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'groupBy',
})
export class GroupByPipe implements PipeTransform {
  transform(value: any, groupByKey: string) {
    const events: any[] = [];
    const groupedElements: any = {};

    value.forEach((obj: any) => {
      if (!(obj[groupByKey] in groupedElements)) {
        groupedElements[obj[groupByKey]] = [];
      }
      groupedElements[obj[groupByKey]].push(obj);
    });

    for (let prop in groupedElements) {
      if (groupedElements.hasOwnProperty(prop)) {
        events.push({
          key: prop,
          list: groupedElements[prop]
        });
      }
    }

    return events;
  }
}

我确信有更好,更酷的方法来做到这一点(比如在一条线上有一些ES6非常棒),但现在这个有效.

现在对于模板,就像在Ionic 1中一样,你基本上仍然有2个循环,第一个使用管道来转换你的数据和第二个(内部)循环.

这是两个版本,第二个显示管道如何用于使用不同的键进行分组,并假设数据包含category原始events数组的每个元素中的键:

按日期

<ion-item-group *ngFor="let group of events | groupBy: 'date'">
    <ion-item-divider color="light">
        {{ group.key }}
    </ion-item-divider>
    <ion-item *ngFor="let event of group.list">{{ event.title }}</ion-item>
</ion-item-group>

按类别

<ion-item-group *ngFor="let group of events | groupBy: 'category'">
    <ion-item-divider color="light">
        {{ group.key }}
    </ion-item-divider>
    <ion-item *ngFor="let event of group.list">{{ event.title }} {{ event.date }}</ion-item>
</ion-item-group>

您可以在模板中使用您希望的任何组件,这可以直接来自Ionic Documentation.

不要忘记在您使用它的页面中导入管道.如果您使用了延迟加载,则需要将其添加到imports页面模块中.