javascript - ionic v3 : Group list by date/day

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”分组的“event”对象中的事件列表。因此，同一日期的所有事件都按项目分隔符分组:

+--------------+
+ 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 个循环，第一个使用管道转换数据，第二个(内部)循环。

这里有两个版本，第二个显示了如何使用管道对不同的键进行分组，并假设数据在原始 events 的每个元素中包含一个 category 键> 数组:

按日期

<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 中。