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

时间:2017-08-22 12:23:04

标签: javascript html angular sorting angular2-pipe

说我有一个Event集合:

export class Event {
  startingTime: Date
}

我想显示从最接近今天开始订购的那些,那OrderByUpcomingToLatestPipe会是什么样的?

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

编辑:

我希望当最接近今天的日期是第一个时,数组按降序排列,而距离今天最远的日期是最后一个(已经过去的日期将以远程命令的方式相同)

3 个答案:

答案 0 :(得分:4)

不要使用烟斗进行订购。来自Pipes documentation

的摘录
  

附录:没有FilterPipe或OrderByPipe

     

Angular不提供过滤或排序列表的管道。   熟悉AngularJS的开发人员将这些知道为filter和orderBy。   Angular没有等价物。

     

这不是疏忽。 Angular并不提供这样的管道,因为它们   表现不佳并防止侵略性缩小。过滤器和   orderBy需要引用对象属性的参数。前   在这个页面中,你了解到这样的管道必须是不纯的   角度调用几乎在每个变化检测周期中都会产生管道。

您应该在服务或组件中对事件进行排序,可能使用Lodash

之类的内容
import * as _ from 'lodash';

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

然后在你的模板中:

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

答案 1 :(得分: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如果第二个日期是过去的 - 它们的顺序无关紧要

    1.2否则,意味着第二个是将来的第二个日期更高

  2. 否则,意味着第一个日期是将来的

    2.1如果第二个日期是过去,请按顺序将第一个日期提高

    2.2否则,如果第一个日期在第二个日期之前,意味着第一个日期比第二个日期更接近now,则将第一个日期更高的顺序

    2.3否则,意味着第二个日期比第一个日期更接近now,将第二个日期更高的顺序

答案 2 :(得分:0)

尝试使用此自定义管道

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