如何在Angular 2中对数组进行排序

我有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>

---

创建使用香草排序函数转换数组的管道

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

从“angular2/core”导入{Pipe}；
@烟斗({
名称：“排序”
})
出口级TsSortPipe{
转换（数组：数组，参数：字符串）：数组{
array.sort（（a:any，b:any）=>{
if（a.时间戳b.时间戳）{
返回1；
}否则{
返回0；
}
});
返回数组；
}
}

编辑：

在html中使用它，如下所示

---

创建管道，使用香草排序功能转换数组

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

从“angular2/core”导入{Pipe}；
@烟斗({
名称：“排序”
})
出口级TsSortPipe{
转换（数组：数组，参数：字符串）：数组{
array.sort（（a:any，b:any）=>{
if（a.时间戳b.时间戳）{
返回1；
}否则{
返回0；
}
});
返回数组；
}
}

编辑：

在html中使用它，如下所示

强烈建议不要将管道用作分拣设备

过滤，尤其是排序是昂贵的操作。当Angular每秒多次调用这些管道方法时，即使是中等大小的列表，用户体验也会严重降低。在AngularJS应用程序中，filter和orderBy经常被滥用，导致人们抱怨AngularJS本身速度慢。从间接意义上讲，这种收费是公平的，AngularJS首先通过提供filter和orderBy来准备这个性能陷阱

Angular团队和许多经验丰富的Angular开发人员强烈建议将过滤和排序逻辑移动到组件本身中。组件可以公开Filteredheros或Sortedheros属性，并控制何时以及多久执行支持逻辑。任何你本应该放在管道中并在整个应用程序中共享的功能都可以写入过滤/排序服务并注入到组件中

相反，管道用于逐个处理阵列的元素。您可以使用大写或小写的管道，或者对数组的元素应用任何类型的转换

正如Angular doc中推荐的那样，我更愿意采用编程方法，使用Javascripts排序功能在组件中移动排序

对于一个完整的讨论，请阅读这似乎是相当详细

简单的回答是：

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每秒多次调用这些管道方法时，即使是中等大小的列表，用户体验也会严重降低。在AngularJS应用程序中，filter和orderBy经常被滥用，导致人们抱怨AngularJS本身速度慢。从间接意义上讲，这种收费是公平的，AngularJS首先通过提供filter和orderBy来准备这个性能陷阱

Angular团队和许多经验丰富的Angular开发人员强烈建议将过滤和排序逻辑移动到组件本身中。组件可以公开Filteredheros或Sortedheros属性，并控制何时以及多久执行支持逻辑。任何你本应该放在管道中并在整个应用程序中共享的功能都可以写入过滤/排序服务并注入到组件中

相反，管道用于逐个处理阵列的元素。您可以使用大写或小写的管道，或者对数组的元素应用任何类型的转换

正如Angular doc中推荐的那样，我更愿意采用编程方法，使用Javascripts排序功能在组件中移动排序

对于一个完整的讨论，请阅读这似乎是相当详细

简单的回答是：

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

嗨，我不确定是否使用管道。相反，在将数组传递到UI之前，我会使用编程方式在Javascript中对数组进行排序。如果你有很多数组操作要做，你也许应该考虑使用像Load这样的框架。没有，我没有很多数组来操作，我只想按日期（时间戳）嗨，我不确定我会用一个管道。相反，在将数组传递到UI之前，我会使用编程方式在Javascript中对数组进行排序。如果你有很多数组操作要做，你应该考虑使用像Load这样的框架。没有，我没有很多数组来操作，我只想按日期排序（时间戳）以及如何在HTML中使用？抱歉，我真的很儒学。你能告诉我如何在html中添加参数吗？因为只在html中使用排序并不能像你所说的那样工作，请你编辑你的答案，告诉我如何在html中使用，然后我当然可以标记为答案。@bambam，这里有没有选择？Angular文档建议不要使用管道进行排序。他们建议在组件中移动排序。以及如何在html中使用？对不起，我真的很困惑。。你能告诉我如何在html中添加参数吗？因为只在html中使用排序并不能像你所说的那样工作，请你编辑你的答案，告诉我如何在html中使用，然后我当然可以标记为答案。@bambam，这里有没有选择？Angular文档建议不要使用管道进行排序。他们建议在组件中移动排序。我编辑代码是为了向您展示我的意思。。那么如何在这里使用您的代码呢？你能给我看一下吗？我已经稍微修改了我的答案，使之接近