如何使用 Angular2 管道按最近的日期订购答案

【问题标题】：How to order by closest date to today using Angular2 pipe如何使用 Angular2 管道按最近的日期订购
【发布时间】：2018-01-30 17:39:03
【问题描述】：

假设我有一个Event 收藏：

export class Event {
  startingTime: Date
}

我想显示它们从最接近今天开始的顺序，OrderByUpcomingToLatestPipe 会是什么样子？

<event-element *ngFor="let event of events | orderByUpcomingToLatest"></event-element>

编辑：

当最接近今天的日期是第一个并且离今天最远的日期是最后一个时，我希望数组按降序排列（已经过去的日期将在最远的日期之后以相同的方式排序）

【问题讨论】：

标签： javascript html angular sorting angular2-pipe

【解决方案1】：

这是工作管道

import {Pipe, PipeTransform} from "@angular/core";

@Pipe({
  name: "upcomingToLatest"
})
export class UpcomingToLatestPipe implements PipeTransform{
  transform(array: any, fieldName: any): any {
    if (array) {
      let now: Date = new Date();

      array.sort((a: any, b: any) => {
        let date1: Date = new Date(a.object[fieldName]);
        let date2: Date = new Date(b.object[fieldName]);

        // If the first date passed
        if(date1 < now){
          // If the second date passed
          if(date2 < now){
            return 0
          } else {
            return 1
          }
        } else {
          // If the second date passed
          if(date2 < now) {
            return -1
          } else if(date1 < date2) {
            return -1
          } else if(date1 > date2) {
            return 1
          } else {
            return 0;
          }
        }
      });
    }

    return array;
  }
}

对 if 树的简要说明：

如果第一个日期是过去的

1.1 如果第二个日期是过去的 - 它们的顺序无关紧要

1.2 Else，表示第二个在未来，将第二个日期按顺序拉高
否则，表示第一个日期是在未来

2.1 如果第二个日期在过去，则将第一个日期的顺序提高

2.2 否则，如果第一个日期在第二个日期之前，即第一个日期比第二个日期更接近now，则将第一个日期的顺序提高

2.3 Else，表示第二个日期比第一个日期更接近now，将第二个日期的顺序拉高

【讨论】：

【解决方案2】：

尝试使用此自定义管道

import { Pipe, PipeTransform } from "@angular/core"

@Pipe({
    name: 'OrderByUpcomingToLatestPipe '
})
export class OrderByUpcomingToLatestPipe implements PipeTransform {

    transform(value: any, args?: any): any {
        let newVal = value.sort((a: any, b: any) => {
            let date1 = new Date(a.date);
            let date2 = new Date(b.date);

            if (date1 > date2) {
                return 1;
            } else if (date1 < date2) {
                return -1;
            } else {
                return 0;
            }
        });

        return newVal;
    }

}

Working Plunker

【讨论】：

感谢您的回复！我很确定与 TODAY 没有可比性，仅在两个日期实例之间，因此它不会按即将到来的到最新的进行排序，我错了吗？没有涉及let today = new Date()。我已经更新了问题，并提出了对已过日期的建议
但我想如果你传递了正确的日期格式而不是今天还是明天没关系，它会自动比较，不是吗？
这将按日期降序排列，我希望数组按降序排列，当最接近今天的日期是第一个，离今天最远的日期是最后一个（已经过去的日期将在最远的日期之后以相同的方式排序）
您是否有机会帮助我实现这种行为？ :')
检查我的答案，让我知道你的想法；）

【解决方案3】：

不要使用管道进行排序。来自Pipes documentation 的片段：

附录：没有 FilterPipe 或 OrderByPipe

Angular 不提供用于过滤或排序列表的管道。熟悉 AngularJS 的开发人员将它们称为 filter 和 orderBy。 Angular 中没有等价物。

这不是疏忽。 Angular 不提供这样的管道，因为它们表现不佳并防止激进的缩小。过滤器和 orderBy 需要引用对象属性的参数。早些时候在此页面中，您了解到此类管道必须是不纯的，并且 Angular 几乎在每个变更检测周期都会调用不纯管道。

您应该对服务或组件中的事件进行排序，可能使用类似Lodash：

import * as _ from 'lodash';

this.sortedEvents = _.sortBy(this.events, e => p.startingTime);

然后在你的模板中：

<event-element *ngFor="let event of sortedEvents"></event-element>

【讨论】：