ionic 2で月ごとにアイテムをグループ化するには？

Question

私は、添付画像のような仕切りでカレンダーリストビューの月単位でグループ化したいデータコレクションを持っています。どのようにイオン2でこれを行うには？私はフィルターパイプ

@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; 
     }); 
    } 
} 

や病気これを行うテンプレート内を持っている瞬間

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

。

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

パイプグループ項目ですが、正常に動作しますが、propaly動作しないで持っているすべてのデータと同じ月に2つの異なる年の間にある項目がある場合は、このグループがないと数ヶ月の仕切りを示しヶ月配列を持ちます。

Answer 1

Iは、フロントエンドでプログラミングする際に便利なデータを持っているしたいと思います。受け取ったデータを処理する方法はいくつかあります。私の意見では、それはあなたが持っているデータを操作する最も簡単な方法ですので、あなたは次のように、その月の配列を反復処理することができます：

あなたのコンポーネント

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; 
     }); 
    } 
} 

あなたの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> 

私はこれをテストしなかったので、私はこのことを見守ります。どのようにしてこれを明確にするか。