Angular4x列表排序咨询：如何实现类似AngularJS的orderBy管道功能

嗨Andrea！我太懂你想念AngularJS里那种一行ng-repeat="x in customers | orderBy : 'city'"就能搞定排序的爽感了😉。Angular 4+确实移除了内置的orderBy管道，但我们完全可以自己实现一个效果一致的功能，下面给你两种简单易懂的方案：

方案一：自定义orderBy管道（最贴近AngularJS写法） #

这种方式和你熟悉的AngularJS用法几乎一样，只需要自己写一个管道类：

1. 创建管道文件 #

你可以用Angular CLI快速生成：

ng generate pipe orderBy

或者手动在项目里新建order-by.pipe.ts文件，内容如下：

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

@Pipe({
  name: 'orderBy'
})
export class OrderByPipe implements PipeTransform {
  transform(value: any[], key: string, reverse: boolean = false): any[] {
    if (!value || !key) return value;

    // 处理嵌套属性，比如 'address.city'
    const getProperty = (obj: any, path: string) => {
      return path.split('.').reduce((current, prop) => {
        return current && current[prop] ? current[prop] : '';
      }, obj);
    };

    const sortedArr = value.sort((a, b) => {
      const valA = getProperty(a, key);
      const valB = getProperty(b, key);

      // 区分字符串和数字的排序逻辑
      if (typeof valA === 'string' && typeof valB === 'string') {
        return valA.localeCompare(valB);
      } else {
        return valA - valB;
      }
    });

    return reverse ? sortedArr.reverse() : sortedArr;
  }
}

2. 在模块中声明管道 #

打开你的模块文件（比如app.module.ts），把这个管道加入declarations数组：

import { OrderByPipe } from './order-by.pipe';

@NgModule({
  declarations: [
    // ...其他组件、管道
    OrderByPipe
  ]
})
export class AppModule { }

3. 在模板中使用 #

现在你就能像AngularJS那样写了：

<!-- 按city升序排序 -->
<div *ngFor="let customer of customers | orderBy: 'city'">
  {{ customer.name }} - {{ customer.city }}
</div>

<!-- 按city降序排序，加第二个参数true -->
<div *ngFor="let customer of customers | orderBy: 'city': true">
  {{ customer.name }} - {{ customer.city }}
</div>

方案二：组件内直接处理排序（性能更优） #

如果你的列表数据会频繁更新，管道可能会有额外的性能开销，这时候直接在组件里处理排序更合适：

1. 组件代码示例 #

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

@Component({
  selector: 'app-customer-list',
  templateUrl: './customer-list.component.html'
})
export class CustomerListComponent implements OnInit {
  customers = [
    { name: 'Alice', city: 'Paris' },
    { name: 'Bob', city: 'London' },
    { name: 'Charlie', city: 'New York' }
  ];
  sortedCustomers: any[];
  isDescending = false;

  ngOnInit(): void {
    // 初始化时排序
    this.sortByCity();
  }

  // 按city排序的方法，支持升降序切换
  sortByCity(): void {
    this.sortedCustomers = [...this.customers].sort((a, b) => {
      const compareResult = a.city.localeCompare(b.city);
      return this.isDescending ? -compareResult : compareResult;
    });
  }

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

2. 模板中使用排序后的数组 #

<div *ngFor="let customer of sortedCustomers">
  {{ customer.name }} - {{ customer.city }}
</div>

<!-- 可选：添加切换排序方向的按钮 -->
<button (click)="toggleSortDirection()">
  {{ isDescending ? '升序' : '降序' }}排序
</button>

两种方案都能完美实现你想要的排序效果，你可以根据自己的项目场景选择~

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