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"
    }
  ]
}

这给了我一个存储在＆＃34;事件中的事件列表＆＃34;对象按＆＃34; event.date＆＃34;分组。所以在同一天的所有事件都按项目分隔符分组：

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

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

1 个答案:

按日期

按类别