在ngFor Angular上按start_date排序

Question

在选择可用日期部分，我有一个排列日期，如下所示。

ngFor上的代码

<div *ngFor="let date of tripdetail.trip_availabledate; let i = index;">
   <a [ngClass]="{'active': date.status}" class="btn btn-block" (click)="keyPress('currentDateSelected', i)">{{date.start_date | date:'dd MMM yyyy'}} - {{date.end_date | date:'dd MMM yyyy'}}</a>
</div>

问题是，如何用ngFor上的开始日期对这些可用日期进行排序？

Answer 1

尝试这样：

在控制器中排序：

ngOnInit() {
    this.tripdetail.trip_availabledate = this.tripdetail.trip_availabledate.sort((a: any, b: any) =>
        new Date(a.start_date).getTime() - new Date(b.start_date).getTime()
    );
}

您也可以使用管道进行尝试。

使用管道排序

SortBydatePipe：

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

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

  transform(value: any, key?: any): any {
    return value.sort(
      (a: any, b: any) =>
        new Date(a[key]).getTime() - new Date(b[key]).getTime()
    );
  }

}

模板：

<div *ngFor="let date of tripdetail.trip_availabledate | sortBydate  : 'start_date'; let i = index;">
   <a [ngClass]="{'active': date.status}" class="btn btn-block" (click)="keyPress('currentDateSelected', i)">{{date.start_date | date:'dd MMM yyyy'}} - {{date.end_date | date:'dd MMM yyyy'}}</a>
</div>

Working Demo

Answer 2

在Angular 2+中，要解决此问题，您必须在控制器中对集合进行排序，或者可以编写自定义管道

Answer 3

使用Array.prototype.sort（）将trip_availabledate排序，请遵循此link。

public get trip_availabledate() {
    const jsonArray = [
        { start_date: new Date('2019-10-31'), end_date: new Date('2019-11-04') },
        { start_date: new Date('2019-11-10'), end_date: new Date('2019-11-14') },
        { start_date: new Date('2019-10-24'), end_date: new Date('2019-10-28') }
    ];

    // For ascending(asc) order
    const result = jsonArray.sort((a, b) => new Date(a.start_date).getTime() - new Date(b.start_date).getTime());

    // For descending(desc) order
    // const result = jsonArray.sort((a, b) => new Date(b.start_date).getTime() - new Date(a.start_date).getTime());
    return result;
}