Question

我是angular2的新手，我试图按照来自数据库的收集时间日期戳来整理我的食物订单列表。

假设订单对象位于下方，在我的模板中，我想在下面的示例中使用最早的collectiontime对其进行排序，它将是id: 2454

var awaitingPicking = [
  {
   "id": "2452",
   "OrderLineGroups": [
     {
       "CollectionDetails": {
         "CollectionFrom": "2017-03-21T11:00:00.317"
       }
     }
   ]
  },
{
   "id": "2454",
   "OrderLineGroups": [
     {
       "CollectionDetails": {
         "CollectionFrom": "2017-03-21T11:00:00.317"
       }
     }
   ]
  }
 ]

图片显示了我的列表在我的HTML中呈现的方式，并且id: 2454在id: 2452之前应该位于底部。

修改

this.awaitingPicking.push(element); // these holds all order objects
this.awaitingPicking.map(e => {
  this.getCollectionFrom = e.CollectionFrom = e.OrderLineGroups[0].CollectionDetails.CollectionFrom
   return e
})

模板 -

<div *ngFor="let prepare of awaitingPicking | orderBy: '+getCollectionFrom'" id="prepareOrder"> </div>

如何使用最早的collectionFrom对列表进行排序？

sample image

Answer 1

该解决方案使用的自定义过滤器只有一个深度，因此您的数据也必须只有1个深度：

https://plnkr.co/edit/rCGc2IZECuPiL3QqNnlJ?p=preview（已更新）

的变化：

app.ts

//...
@Component({
  selector: 'my-app',
  providers: [],
  pipes: [DatePipe, ArraySortPipe],
  template: `
    <ul>
      <li *ngFor="#item of sortableArray | arraySort:'+CollectionFrom'">{{item.id}} {{item.CollectionFrom}}</li>
    </ul>
  `,
  directives: []
})
//...
export class App {

  inputArray: Array<any> = [
      {
     "id": "2452",
     "OrderLineGroups": [
       {
         "CollectionDetails": {
           "CollectionFrom": "2017-03-21T11:40:00.317"
         }
       }
     ]
    },
  {
     "id": "2454",
     "OrderLineGroups": [
       {
         "CollectionDetails": {
           "CollectionFrom": "2017-03-21T11:00:00.317"
         }
       }
     ]
    }
  ]

  sortableArray: Array<any> = this.inputArray.map(e => {
    e.CollectionFrom = e.OrderLineGroups[0].CollectionDetails.CollectionFrom
    return e
  })

  constructor() {}
}

//...

按最早收集日期时间在angular2中对项目列表排序

1 个答案:

app.ts