如何在 Angular 2 中排序数组

Question

我有 ionic 2 应用程序和旧版本的 angularjs，所以它默认没有 orderby 管道..所以我有这样的数组

  <div *ngFor="let boatBooking of boatBookings" style="padding: 0px; margin:0px;">
  <ion-item>

        <ion-icon *ngIf="boatBooking.status !== 3" name="boat" item-left></ion-icon>
        <h3 *ngIf="boatBooking.status !== 3">{{ boatBooking.boat.name }}</h3>
        <p *ngIf="boatBooking.status !== 3"><small><strong>{{ boatBooking.date | date: 'dd/MM/y' }}</strong></small></p>

        <ion-icon *ngIf="boatBooking.status === 3" style="color:#d0d0d0!important" name="boat" item-left></ion-icon>
        <h3 *ngIf="boatBooking.status === 3" style="color:#d0d0d0!important">{{ boatBooking.boat.name }}</h3>
        <p *ngIf="boatBooking.status === 3" style="color:#d0d0d0!important"><small><strong>{{ boatBooking.date | date: 'dd/MM/y' }}</strong></small></p>   

        <ion-note *ngIf="boatBooking.status !== 3" item-end><div style="background:#f53d3d;" class="ppoints">-{{ boatBooking.boat.pointsPerDay }} </div></ion-note>
        <ion-note *ngIf="boatBooking.status === 3" item-end><div style="background:#ddd4d4; color:#848484" class="ppoints">0</div></ion-note>          
  </ion-item>
  </div>

使用 angularfire 2 版本从 firebase 获取数据（我知道所有代码都是旧的但此时无法更新）

我有 boatBooking 的时间戳：

boatBooking.timestamp 并希望对数组宽度自定义管道或宽度进行排序，在 google 中搜索但未找到任何此类管道。

所以我的问题是：如何使用 boatBooking.timestamp 来订购阵列宽度管道？（时间戳以毫秒为单位）

这里是数组代码

      this.boatService.getUserBookings(this.member['$key']).subscribe(boatBookings => {

    this.boatBookings = [];
    boatBookings.forEach(boatBooking => {
      this.boat = this.boatService.getBoat(boatBooking.boatId);
      this.boatService.getBoat(boatBooking.boatId).first().subscribe(boat => {
        this.boatBookings.unshift(Object.assign(boatBooking, { boat }));
      });
    });

  });

Answer 1

创建使用 Vanilla 排序函数转换数组的管道。

import { Pipe } from "angular2/core";

@Pipe({
  name: "sort"
})
export class TsSortPipe {
  transform(array: Array<any>, args: string): Array<any> {
    array.sort((a: any, b: any) => {
      if (a.timestamp < b.timestamp) {
        return -1;
      } else if (a.timestamp > b.timestamp) {
        return 1;
      } else {
        return 0;
      }
    });
    return array;
  }
}

编辑：

在html中使用如下

<div *ngFor="let boatBooking of boatBookings | sort" style="padding: 0px; margin:0px;">

Answer 2

Angular documentation强烈建议不要使用管道作为分类设备。

Filtering and especially sorting are expensive operations. The user experience can degrade severely for even moderate-sized lists when Angular calls these pipe methods many times per second. filter and orderBy have often been abused in AngularJS apps, leading to complaints that Angular itself is slow. That charge is fair in the indirect sense that AngularJS prepared this performance trap by offering filter and orderBy in the first place.

...

The Angular team and many experienced Angular developers strongly recommend moving filtering and sorting logic into the component itself. The component can expose a filteredHeroes or sortedHeroes property and take control over when and how often to execute the supporting logic. Any capabilities that you would have put in a pipe and shared across the app can be written in a filtering/sorting service and injected into the component.

管道更适合用于一个一个地处理数组的元素。您可以将管道用于大写或小写，或对数组元素应用任何类型的转换。

根据 Angular 文档中的建议，我宁愿采用编程方法并使用 Javascripts 排序功能在组件中移动排序。

如需完整讨论，请阅读此stack post，它似乎非常详细。

简短的回答是：

boatBookings.sort()
boatBookings.sort(function(a,b){
  return new Date(b.date).getDate() - new Date(a.date).getDate();
});

对于那些使用 ES 6 的人来说，它看起来像这样：

boatBookings.sort()
boatBookings.sort((a,b) => new Date(b.date).getDate() - new Date(a.date).getDate())

数组排序后，您可以将其传递给 HTML。

如何在 Angular 2 中排序数组

How to order array in Angular 2

ionic2

angularfire2

angular