Javascript 如何使用Angular2管道按最接近今天的日期订购

假设我有一个事件集合：

export class Event {
  startingTime: Date
}

我想显示从最接近今天开始的顺序，顺序是什么样的

编辑：

---

如果最接近今天的日期是第一个日期，而距离今天最远的日期是最后一个已经过去的日期，则我希望数组按降序排列。同样，不要使用管道进行排序。以下文件中的代码片段：

附录：无过滤器管道或OrderByPipe

Angular不提供用于筛选或排序列表的管道。 熟悉AngularJS的开发人员将其称为filter和orderBy。 在角度上没有等价物

这不是疏忽。Angular不提供此类管道，因为它们 表现不佳，防止过度缩小。过滤器和 orderBy需要引用对象属性的参数。早期的 在本页中，您了解到此类管道必须是不纯净的 Angular在几乎每个变化检测周期中调用不纯净管道

您应该在服务或组件中对事件进行排序，可能会使用以下方法：

然后在模板中：

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

---

订购时不要使用管道。以下文件中的代码片段：

附录：无过滤器管道或OrderByPipe

Angular不提供用于筛选或排序列表的管道。 熟悉AngularJS的开发人员将其称为filter和orderBy。 在角度上没有等价物

这不是疏忽。Angular不提供此类管道，因为它们 表现不佳，防止过度缩小。过滤器和 orderBy需要引用对象属性的参数。早期的 在本页中，您了解到此类管道必须是不纯净的 Angular在几乎每个变化检测周期中调用不纯净管道

您应该在服务或组件中对事件进行排序，可能会使用以下方法：

然后在模板中：

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

---

尝试使用此自定义管道

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

}

---

尝试使用此自定义管道

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

}

---

这是工作管道

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否则，意味着第二个日期在未来，将第二个日期在订单中提高

否则，意味着第一次约会是在未来

2.1如果第二个日期是过去的，则将第一个日期放在订单的较高位置

2.2否则，如果第一个日期在第二个日期之前，意味着第一个日期比第二个日期更接近现在，则将第一个日期放在顺序中的较高位置

2.3否则，意味着第二个日期比第一个日期更接近现在，将第二个日期放在顺序中的较高位置

---

这是工作管道

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否则，意味着第二个日期在未来，将第二个日期在订单中提高

否则，意味着第一次约会是在未来

2.1如果第二个日期是过去的，则将第一个日期放在订单的较高位置

2.2否则，如果第一个日期在第二个日期之前，意味着第一个日期比第二个日期更接近现在，则将第一个日期放在顺序中的较高位置

2.3否则，意味着第二个日期比第一个日期更接近现在，将第二个日期放在顺序中的较高位置

---

谢谢你的回复！我很确定在这一点上与今天没有什么可比性，只是在两个日期之间，所以它不会按“即将到来”到“最晚”排序，我错了吗？没有let today=涉及新日期。我已经更新了问题，并建议了已经通过的日期，但我想如果你通过了正确的日期格式，而不是今天还是明天，这无关紧要，它将自动生效，不是吗？这将按日期降序排列顺序，我希望数组按降序排列，最接近今天的日期是第一个日期，距离今天最远的日期是已经过去的最后一个日期，将以相同的方式排列在最远的日期之后。您有没有可能帮助我实现这种行为？：'检查我的答案，让我知道你的想法；谢谢你的回复！我很确定在这一点上与今天没有什么可比性，只是在两个日期之间，所以它不会按“即将到来”到“最晚”排序，我错了吗？没有let today=涉及新日期。我已经更新了问题，并建议了已经通过的日期，但我想如果你通过了正确的日期格式，而不是今天还是明天，这无关紧要，它将自动生效，不是吗？这将按日期降序排列顺序，我希望数组按降序排列，最接近今天的日期是第一个日期，最远的日期是最后一个日期

---

我已经通过了，也将以同样的方式被命令。你有没有可能帮助我实现这样的行为？：'检查我的答案，让我知道你的想法；