Ionic v3:按日期/天分组列表

Ionic v3: Group list by date/day(Ionic v3:按日期/天分组列表)

问题描述

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

In good old version 1 of Ionic I was able to build an event-list grouped by date like this:

<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 共享同一日期):

While the events object looks like this (event #1 and #3 share the same date):

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

This gave me a list of events stored in the "event" object grouped by "event.date". So all events on the same date where grouped by an item-divider:

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

如何使用 Ionic v3 实现这一点?有什么想法吗?

How to achieve this with Ionic v3? Any ideas?

推荐答案

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

You need a pipe to transform your data into a structure you can easily use in a template: 1 array of objects, containing other arrays of objects. Your final data should look like this:

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'
  }]
}];

这是我在管道上的尝试:

Here is my attempt at a pipe that accomplishes that:

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 的厉害之处)，但目前这行得通.

I'm sure there are better, cooler ways to do this (like in one single line with some ES6 awesomeness) but this works for now.

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

Now for the template, like you would in Ionic 1, you basically still have 2 loops, the first one uses the pipe to transform your data and the second (inner) loop.

这里有两个版本，第二个版本展示了如何使用管道对不同的键进行分组，并假设数据在原始 eventscategory 键> 数组:

Here are two versions, the second shows how the pipe can be used to group with different keys and assumes the data contains a category key in each element of the original events array:

<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 文档.

You can use whatever components you wish in your template, this is straight from the Ionic Documentation.

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

Don't forget to import the pipe in the page where you use it. If you used lazy loading, you need to add it to the imports of the page's module.

这篇关于Ionic v3:按日期/天分组列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！