Ionic2,Angular2 - 按日期排序元素答案

【问题标题】：Ionic2,Angular2 - sorting elements by dateIonic2,Angular2 - 按日期排序元素
【发布时间】：2017-02-18 05:59:15
【问题描述】：

目前我正在开发用于管理锻炼的应用程序。我想按日期对锻炼进行排序。我的一次锻炼记录如下：

 "title": "Running through the park",
    "type": "Running",
    "distance": "10",
    "duration": [
        {
            "hours": "2"
        },
        {
            "minutes": "40"
        },
        {
            "seconds": "44"
        }
    ],
    "note": "Running in NY park."

我想按天对锻炼进行排序。例如：

09.10

正在运行
篮球

07.10

俯卧撑
足球

目前看起来是这样的：workouts-main screen

我的那个组件的 html 文件很简单：

<ion-list>
<ion-item *ngFor="let workout of workouts" (click)="workoutSelected($event,workout)">
    {{workout.title}}
</ion-item>

最好的方法是什么？

【问题讨论】：

标签： json angular ionic-framework ionic2

【解决方案1】：

由于我最近偶然发现了类似的问题并且找不到完全令人满意的答案，所以我想分享我的解决方案。

.ts

  objectEntries: any[];
  groupedObjectEntries: any[];

  ionViewDidLoad() {
    // put in the line below your custom function for getting data into objectEntries object
    .....
    this.groupObjectEntries(this.objectEntries); 
  } 

  groupObjectEntries(objectEntries){

        var currentDate: any; 
        var currentObjectEntries = [];
        var output = [];

        // sort descending
        let sortedObjectEntries =objectEntries.sort(function (a, b) {
          var key1 = new Date(a.date);
          var key2 = new Date(b.date);

          if (key1 < key2) {
              return 1;
          } else if (key1 == key2) {
              return 0;
          } else {
              return -1;
          }
        });

        sortedObjectEntries.forEach((item, index) => {

            // conversion from JSON format
            var itemDate = new (item.date);
            itemDate.setHours(0,0,0,0);

            if(itemDate != currentDate){

                currentDate = itemDate;
                let newGroup = {
                    groupDate: currentDate,
                   objectEntries: []
                };

                currentObjectEntries = newGroup.objectEntries;
                output.push(newGroup);

            } 

            currentObjectEntries.push(item);

        });

        this.groupedObjectEntries = output;
  }

.html

<ion-content>    
<ion-item-group *ngFor="let group of groupedObjectEntries">
    <ion-item-divider sticky> 
    <ion-item color="gray" ><h4>{{ group.groupDate | date:'fullDate' }} </h4> </ion-item> 
    </ion-item-divider>  

      <button ion-item *ngFor="let item of group.objectEntries"  (click)="itemSelected(item)">
          <h3>{{ item.field1 }} </h3>
          <p>{{ item.field2 }}</p>
      </button>
 </ion-item-group>  
</ion-content>

【讨论】：