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，想要订购数组宽度自定义管道或宽度somethins，在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

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

过滤，尤其是排序是昂贵的操作。当Angular每秒多次调用这些管道方法时，即使是中等大小的列表，用户体验也会严重恶化。 filter和orderBy经常在AngularJS应用中被滥用，导致人们抱怨Angular本身运行缓慢。从间接的角度来看，这种收费是公平的，因为AngularJS首先提供了filter和orderBy来准备此性能陷阱。

...

Angular团队和许多经验丰富的Angular开发人员强烈建议将过滤和排序逻辑移入组件本身。该组件可以公开filteredHeroes或sortedHeroes属性，并控制执行支持逻辑的时间和频率。您本可以放入管道并在应用程序之间共享的所有功能都可以写入过滤/排序服务中，并注入到组件中。

管道通常用于一对一地处理数组的元素。您可以使用大写或小写的管道，也可以对数组的元素进行任何形式的转换。

按照Angular文档中的建议，我宁愿采用编程方式，并使用Javascript排序功能来在组件中移动排序。

要进行全面讨论，请阅读这份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。

Answer 2

创建使用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;">

如何在Angular 2中排序数组

2 个答案: