如何在离子2中按月分组项目？ [英] How to group items by month in ionic 2?
本文介绍了如何在离子2中按月分组项目？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个数据收集，我想按月分组日历列表视图与分隔符像附加的图像。
{
data：[
{
id：75，
title：Oudergesprekken，
startDate：18-01-2017，
}，
{
id：76，
title：Talentmiddag，te ontdekken。< / p>，
startDate：25-01-2017，
$ bid：77，
title：Studiedag team，alle kinderen vrij！，
startDate：06- 02-2017，
}，
{
id：79，
title：Letterfeest groep 3，
startDate： 14-02-2017，
}，
{
id：78，
title：Voorjaarsvakantie，
startDate ：24-02-2017，
}
]
我有一个过滤管
@Pipe（{
name：filter，
pure： false
}）
导出类ArrayFilterPipe实现PipeTransform {
transform（items：Array< any> ;,条件：{[field：string]：any}）：Array< any> {
return items.filter（item => {
for（let field in conditions）{
if（item [field]！== conditions [field]）{
返回false;
}
}
返回true;
}）;
}
}
并在模板中做这件事。
< ion-item-group * ngFor =let maand of maanden>
< ion-item-divider sticky> {{maand.title}}< / ion-item-divider>
< ion-item * ngFor =let itemItems | filter：{maandNum：maand.id}>
{{item.title}}
< / ion-item>
< / ion-item-group>
管道使用一个月数组对项目进行分组，可以很好地工作，但显示的月份没有任何分隔符数据，并且如果在同一个月内有两个不同年份的项目，这个小组由于不工作propaly。
解决方案
我想在前端编程时使用有用的数据。有几种方法可以处理您收到的数据。在我看来，这是处理数据的最简单方法，因此您可以遍历该月份数组，如下所示：
您的组件
export class YourComponent {
public months：any = [];
public data：any = [];
$ b构造函数（）{
this.data = [
{
'id'：'75'，
'title'：'Oudergesprekken'，
'startDate'：'18 -01-2017'，
}，
{
'id'：'76'，
'title'：'Talentmiddag， < / p>'，
'startDate'：'25 -01-2017'，
}，
{
'id'：'77'，
'title'：'Studiedag team，alle kinderen vrij！'，
'startDate'：'06 -02-2017'，
}，
{
'id '：'79'，
'title'：'Letterfeest groep 3'，
'startDate'：'14 -02-2017'，
}，
{
'id'：'78'，
'title'：'Voorjaarsvakantie'，
'startDate'：'24 -02-2017'，
}
];
ngOnInit（）{
this.data.forEach（（event）=> {
let monthNumber = this.getMonthNumber（event ）;
if（this.months [monthNumber] === null || undefined）this.months [monthNumber] .events = [];
this.months [monthNumber] .events .push（event）;
}）;
$ b $ private getMonthNumber（event：any）：number {
return event.startDate.split（' - '）[1];
$ b public getMonthName（monthNumber：any）：number {
let maanden = [{id：1，title：Januari}} ，{id：2，title：Februari}，{id：3，title：Maart}，{id：4， id：5，title：Mei}，{id：6，title：Juni}，{id：7，title：Juli}，... ...]; $（b）b maanden.forEach（（maand）=> {
if（maand.id === monthNumber）return maand.title;
}）;
$ / code $ / pre
您的HTML
< ion-item-group * ngFor =let month of months>
< ion-item-divider sticky * ngIf ='month.events.length> 0’ > {{getMonthName（）}}< /离子项分压器>
< / ion-item>
< / ion-item-group>
我没有测试这个，所以我会密切关注这个。这是如何明确的。
I have a data collection that i want to group by month for a calendar list view with dividers like the attached image. How to do this in ionic 2?
{
"data": [
{
"id": "75",
"title": "Oudergesprekken",
"startDate": "18-01-2017",
},
{
"id": "76",
"title": "Talentmiddag",te ontdekken.</p>",
"startDate": "25-01-2017",
},
{
"id": "77",
"title": "Studiedag team, alle kinderen vrij!",
"startDate": "06-02-2017",
},
{
"id": "79",
"title": "Letterfeest groep 3",
"startDate": "14-02-2017",
},
{
"id": "78",
"title": "Voorjaarsvakantie",
"startDate": "24-02-2017",
}
]
At the moment i have an filter pipe
@Pipe({
name: "filter",
pure: false
})
export class ArrayFilterPipe implements PipeTransform {
transform(items: Array<any>, conditions: {[field: string]: any}): Array<any> {
return items.filter(item => {
for (let field in conditions) {
if (item[field] !== conditions[field]) {
return false;
}
}
return true;
});
}
}
and in the template ill do this.
<ion-item-group *ngFor="let maand of maanden" >
<ion-item-divider sticky>{{maand.title}}</ion-item-divider>
<ion-item *ngFor="let item of agendaItems | filter:{ maandNum:maand.id }" >
{{ item.title }}
</ion-item>
</ion-item-group>
The pipe groups the items with an months array that's works fine but shows dividers of months with no have any data and if there are items that are in 2 different years in the same month this group by not working propaly.
解决方案 I'd like to have usefull data when programming in front-end. There are a few ways to handle the data you recieved. In my opinion it's the easiest way to manipulate the data you've got, so you are able to iterate through that month array, like following :
Your component
export class YourComponent {
public months: any = [];
public data: any = [];
constructor() {
this.data = [
{
'id': '75',
'title': 'Oudergesprekken',
'startDate': '18-01-2017',
},
{
'id': '76',
'title': 'Talentmiddag,te ontdekken.</p>',
'startDate': '25-01-2017',
},
{
'id': '77',
'title': 'Studiedag team, alle kinderen vrij!',
'startDate': '06-02-2017',
},
{
'id': '79',
'title': 'Letterfeest groep 3',
'startDate': '14-02-2017',
},
{
'id': '78',
'title': 'Voorjaarsvakantie',
'startDate': '24-02-2017',
}
];
}
ngOnInit() {
this.data.forEach( (event) => {
let monthNumber = this.getMonthNumber(event);
if (this.months[monthNumber] === null||undefined ) this.months[monthNumber].events = [];
this.months[monthNumber].events.push(event);
});
}
private getMonthNumber(event: any): number {
return event.startDate.split('-')[1];
}
public getMonthName(monthNumber: any): number {
let maanden = [ {"id": 1, "title": "Januari"}, {"id": 2, "title": "Februari"}, {"id": 3, "title": "Maart"}, {"id": 4, "title": "April"}, {"id": 5, "title": "Mei"}, {"id": 6, "title": "Juni"}, {"id": 7, "title": "Juli"}, ...... ];
maanden.forEach((maand) => {
if ( maand.id === monthNumber) return maand.title;
});
}
}
Your HTML
<ion-item-group *ngFor="let month of months" >
<ion-item-divider sticky *ngIf='month.events.length > 0'>{{getMonthName()}}</ion-item-divider>
<ion-item *ngFor="let event of month.events | filter:{ maandNum:months.indexOf(month) }" >
{{ item.title }}
</ion-item>
</ion-item-group>
I did not test this, so I'll keep an eye on this one. How this make some clear.
这篇关于如何在离子2中按月分组项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
