angular - 在 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>

问题是，如何使用 startdates on 订购这些可用日期ngFor？

标签： angular

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>

工作演示