Как сделать заказ по ближайшей дате к сегодняшнему дню, используя Angular2 pipe

Не используйте трубы для заказа. Фрагмент из документации по каналам:

Приложение: нет FilterPipe или OrderByPipe

Angular не предоставляет каналы для фильтрации или сортировки списков. Разработчики, знакомые с AngularJS, знают их как filter и orderBy. Аналогов в Angular нет.

Это не оплошность. Angular не предлагает такие пайпы, потому что они плохо работают и препятствуют агрессивной минимизации. И filter, и orderBy требуют параметров, которые ссылаются на свойства объекта. Ранее на этой странице вы узнали, что такие каналы должны быть нечистыми и что Angular вызывает нечистые каналы почти в каждом цикле обнаружения изменений.

Вы должны отсортировать события в службе или компоненте, возможно, используя что-то вроде Lodash:

import * as _ from 'lodash';

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

И затем в вашем шаблоне:

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

Вот рабочая трубка

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, чем первая дата, поставьте вторую дату выше по порядку

Попробуйте использовать этот пользовательский канал

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

}

Рабочий планкер