如何在 ngFor Angular 5 中过滤今天的日期顺序？答案

【问题标题】：How to filter Today's Date Order in ngFor Angular 5?如何在 ngFor Angular 5 中过滤今天的日期顺序？
【发布时间】：2018-12-27 14:16:33
【问题描述】：

我只想在“我的仪表盘”上按今天的日期顺序进行过滤。有任何可能的解决方案吗？

{
      "added_on": "2018-07-19T12:50:02.369Z",
      "deleted": false,
      "_id": "5b001d7a57579f58422437e6",
      "restaurant_id": "5ab9d70f7c4f1e25a7304779",
      "user_id": null,
      "discount_total": 2,
      "__v": 0
}

这是我的数据。日期位于名为 added_on 的字段上。所以我想在仪表板上过滤我今天的订单数据。

【问题讨论】：

您要过滤当前日期的数据还是按当前日期订购数据
按当前日期排序数据

标签： angular date filter ngfor

【解决方案1】：

你可以试试这个解决方案。

我在Stackblitz创建了一个演示

order-by.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'orderBy',
})
export class OrderByPipe implements PipeTransform {

  transform(array: Array<any>, args: string): Array<any> {
    if (typeof args[0] === "undefined") {
      return array;
    }
    let direction = args[0][0];
    let column = args.replace('-', '');
    array.sort((a: any, b: any) => {
      let left = Number(new Date(a[column]));
      let right = Number(new Date(b[column]));
      return (direction === "-") ? right - left : left - right;
    });
    return array;
  }

}

app.component.ts

data = [{
    "added_on": "2018-07-12T12:50:02.369Z",
    "deleted": false,
    "_id": "5b001d7a57579f58422437e6",
    "restaurant_id": "5ab9d70f7c4f1e25a7304779",
    "user_id": null,
    "discount_total": 1,
    "__v": 0
  }, {
    "added_on": "2018-07-19T12:50:02.369Z",
    "deleted": false,
    "_id": "5b001d7a57579f58422437e6",
    "restaurant_id": "5ab9d70f7c4f1e25a7304779",
    "user_id": null,
    "discount_total": 2,
    "__v": 0
  }, {
    "added_on": "2018-07-19T12:50:02.369Z",
    "deleted": false,
    "_id": "5b001d7a57579f58422437e6",
    "restaurant_id": "5ab9d70f7c4f1e25a7304779",
    "user_id": null,
    "discount_total": 3,
    "__v": 0
  }]

app.component.html

*ngFor="let datas of data | orderBy:'-added_on'"

【讨论】：