Angular 4 - 管道订单多字段

Question

在 Angular 4 中，我有如下列表：

[{first: 'Peter', last: 'Smith'}
{first: 'John', last: 'Smith'},
{first: 'Tony', last: 'Hornet'},
{first: 'Sarah', last: 'Hornet'}]

我需要一个管道，它将名称按最后排序，然后按第一个排序。有谁知道如何最好地做到这一点？

Answer 1

您应该创建一个以名称为参数的管道，并按特定顺序调用它。

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

@Pipe({
  name: 'sortwithName'
})
export class SortPipe implements PipeTransform {

  transform(array: any[], field: string): any[] {
    array.sort((a: any, b: any) => {
      if (a[field] < b[field]) {
        return -1;
      } else if (a[field] > b[field]) {
        return 1;
      } else {
        return 0;
      }
    });
    return array;
  }

}

在模板中，

 <li *ngFor="let topic of names  | sortwithName: 'last' | sortwithName: 'first'">

STACKBLITZ DEMO

Answer 2

编辑：根据@JBNizet 的评论，如果您有很多对象，由于性能原因，创建管道实际上不是首选方法。 (https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe)

所以如果你有很多对象，你可以在你的 ts 代码中过滤它们，而不是在模板中。

array.sort((a: any, b: any) => {
  if (!a.last.localeCompare(b.last)) 
  {
    return a.first.localeCompare(b.first);
  }
  return a.last.localeCompare(b.last);
});

原回答

创建管道确实是一个很好的解决方案

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

@Pipe({
  name: 'sortwithName'
})
export class SortPipe implements PipeTransform {

  transform(array: any[], field: string): any[] {
    array.sort((a: any, b: any) => {
      if (!a.last.localeCompare(b.last)) 
      {
        return a.first.localeCompare(b.first);
      }
      return a.last.localeCompare(b.last);
    });
    return array;
  }

}

https://stackblitz.com/edit/angular-filter-1svqdn?file=app/sortFilterPipe.ts

Angular 4 - 管道订单多字段

Angular 4 - Pipe Orderby Multiple Fields

angular-pipe

angular