Ionic v3：按日期/日列出的组列表 [英] Ionic v3: Group list by date/day
问题描述
在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分组。所以在同一天的所有事件都按项目分隔符分组：
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.
这是两个版本，第二个显示如何使用管道使用不同的键进行分组并假设数据在原始事件数组的每个元素中包含类别键：
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>
按类别
By Category
<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>
您可以在模板中使用您想要的任何组件，这可以直接来自离子文档。
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：按日期/日列出的组列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
