Angular2 numeric orderBy管道

Question

我正在尝试使用自定义管道在 Angular2 中按数值对字符串数组进行排序（我没有编写此管道）。这是管道：

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

@Pipe( { name: 'numericalSort' } )

export class NumericalSortPipe implements PipeTransform {
transform( array: Array<any>, orderField: string, orderType: boolean ): Array<string> {
    array.sort( ( a: any, b: any ) => {
        let ae = a[ orderField ];
        let be = b[ orderField ];
        if ( ae == undefined && be == undefined ) return 0;
        if ( ae == undefined && be != undefined ) return orderType ? 1 : -1;
        if ( ae != undefined && be == undefined ) return orderType ? -1 : 1;
        if ( ae == be ) return 0;
        return orderType ? (ae.toString().toLowerCase() > be.toString().toLowerCase() ? -1 : 1) : (be.toString().toLowerCase() > ae.toString().toLowerCase() ? -1 : 1);
    } );
    return array;
  }
}

这是对象。我需要能够按“label”进行数字排序。

{
  "id" : "12345678",
  "accountId" : "123456789",
  "label" : "906",
  "fullAddress" : {
    "zip" : "12345"
  }
}

这是示例 HTML:

<div *ngFor="let place of places | numericalSort: 'label'">
  <h3>
    {{place.label}}
  </h3>
  ...
</div>

我可以按默认字母值排序。如何按数值排序？

Answer 1

您可以使用lodash进行排序。

var myArray = [ 3, 4, 2, 9, 4, 2 ];

_.sortBy(myArray);
// → [ 2, 2, 3, 4, 4, 9 ]

_(myArray).sortBy().take(3).value();
// → [ 2, 2, 3 ]

Answer 2

这是一个先排序数字再排序字母的管道：

@Pipe({name: "orderBy", pure: false})
export class OrderByPipe implements PipeTransform {
  transform(array: Array<any>) {
    return array.sort((a, b) => {
        const [stringA, numberA] = this.order(a);
        const [stringB, numberB] = this.order(b);
        const comparison = stringA.localeCompare(stringB);
        return comparison === 0 ? Number(numberA) - Number(numberB) : comparison;
  })
  }

   order (item) {
      const [, stringPart = '', numberPart = 0] = /(^[a-zA-Z]*)(\d*)$/.exec(item) || [];
  return [stringPart, numberPart];
  }
}

DEMO

Answer 3

我将向管道添加一个新参数，以指示字段的真实类型。因此，管道将能够将数组中项目的字符串字段转换为真实类型：

export class NumericalSortPipe implements PipeTransform {
    transform(array: Array<any>, orderField: string, orderType: boolean, dataType: string): Array<string> {
        array.sort((a: any, b: any) => {
            let ae = a[orderField];
            let be = b[orderField];
            if (ae === undefined && be === undefined) return 0;
            if (ae === undefined && be !== undefined) return orderType ? 1 : -1;
            if (ae !== undefined && be === undefined) return orderType ? -1 : 1;
            if (ae === be) return 0;
            switch (dataType) {
                case "number":
                    ae = parseFloat(ae);
                    be = parseFloat(be);
                    break;
                case "string":
                    ae = ae.toString().toLowerCase();
                    be = be.toString().toLowerCase();
                    break;

                default:
                    break;
            }
            return orderType ? (ae > be ? -1 : 1) : (be > ae ? -1 : 1);
        });
        return array;
    }
}

和用法：

<div *ngFor="let place of places | numericalSort: 'label':false:'number'">
    <h3>
        {{place.label}}
    </h3>
    {{place.id}}
</div>

参见plunk。

Angular2 numeric orderBy管道

Angular2 numeric orderBy pipe

angular

angular-pipe