Angular 5中如何修改orderBy管道的升序/降序排序？

哥们，先给你划个重点——Angular从2.x开始就移除了内置的orderBy管道！这就是你怎么改参数都没效果的核心原因😅。Angular团队移除它的理由是：这类排序管道属于非纯管道，会在每次变更检测时都执行，对大数据量数组来说会严重拖慢性能，因此官方更推荐在组件逻辑里处理排序，或者自定义纯管道实现。

下面给你两种能直接实现需求的方案，按需选择：

方案一：组件内直接处理排序（推荐，性能最优） #

这种方式不需要依赖任何管道，直接在组件里写排序逻辑，性能更好，也是Angular官方首推的做法。

组件代码 #

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponentComponent implements OnInit {
  testArr = [{name: 'bbb', id: '1'}, {name: 'ccc', id: '2'}, {name: 'aaa', id: '0'}];
  sortAsc = true; // 控制排序方向：true=升序，false=降序

  ngOnInit(): void {
    // 初始化时先执行一次排序
    this.sortTestArray();
  }

  // 核心排序方法
  sortTestArray(): void {
    this.testArr.sort((a, b) => {
      // 注意你的id是字符串类型，先转成数字再比较
      const idA = parseInt(a.id, 10);
      const idB = parseInt(b.id, 10);
      return this.sortAsc ? idA - idB : idB - idA;
    });
  }

  // 切换排序方向的按钮触发方法
  toggleSort(): void {
    this.sortAsc = !this.sortAsc;
    this.sortTestArray();
  }
}

HTML代码 #

<!-- 加个按钮快速切换排序方向 -->
<button (click)="toggleSort()">
  {{ sortAsc ? '切换为降序' : '切换为升序' }}
</button>

<ul>
  <li *ngFor="let item of testArr">
    <div>{{item.id}} - {{item.name}}</div>
  </li>
</ul>

方案二：自定义纯orderBy管道 #

如果你确实想用管道的方式实现，可以自己定义一个纯管道，这样只会在输入值或参数变化时才重新排序，避免不必要的性能损耗。

1. 生成管道文件 #

在终端执行命令生成管道：

ng generate pipe orderBy

2. 实现管道逻辑 #

修改生成的order-by.pipe.ts文件：

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

@Pipe({
  name: 'orderBy',
  pure: true // 纯管道，仅当输入数组或参数变化时执行
})
export class OrderByPipe implements PipeTransform {
  transform<T>(array: T[], sortKey: keyof T, isAsc: boolean = true): T[] {
    // 数组为空或排序键不存在时，直接返回原数组副本
    if (!array || !sortKey) return [...array];

    // 复制原数组，避免修改原始数据
    return [...array].sort((a, b) => {
      // 处理字符串类型的数字（比如你的id字段）
      const valA = typeof a[sortKey] === 'string' ? parseInt(a[sortKey] as string, 10) : a[sortKey];
      const valB = typeof b[sortKey] === 'string' ? parseInt(b[sortKey] as string, 10) : b[sortKey];

      // 根据排序方向返回比较结果
      return isAsc ? valA - valB : valB - valA;
    });
  }
}

3. 在模块中注册管道 #

确保你的管道已经在对应模块的declarations数组中注册：

import { NgModule } from '@angular/core';
import { OrderByPipe } from './order-by.pipe';

@NgModule({
  declarations: [
    // ...其他组件/指令
    OrderByPipe
  ]
})
export class YourModule { }

4. HTML中使用管道 #

<button (click)="sortAsc = !sortAsc">
  {{ sortAsc ? '切换为降序' : '切换为升序' }}
</button>

<ul>
  <li *ngFor="let item of testArr | orderBy: 'id' : sortAsc">
    <div>{{item.id}} - {{item.name}}</div>
  </li>
</ul>

补充说明 #

如果你之前以为orderBy是内置的，可能是用过第三方库（比如angular-pipes），但这类库在Angular 5中需要额外安装导入，而且官方并不推荐，因为性能问题。上面两种方案都是原生实现，更可靠。

内容的提问来源于stack exchange，提问作者user636312