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

Ionic v3: Group list by date/day(Ionic v3:按日期/天分组列表)
本文介绍了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:按日期/天分组列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Update another component when Formik form changes(当Formik表单更改时更新另一个组件)
Formik validation isSubmitting / isValidating not getting set to true(Formik验证正在提交/isValiating未设置为True)
React Validation Max Range Using Formik(使用Formik的Reaction验证最大范围)
Validation using Yup to check string or number length(使用YUP检查字符串或数字长度的验证)
Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
password validation with yup and formik(使用YUP和Formick进行密码验证)