Angular2 numeric orderBy pipe

Question

カスタムパイプ（私はこのパイプを書かなかった）を使用して、角度2の数値で文字列の配列をソートしようとしています。ここにパイプがあります：

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

ここにオブジェクトがあります。私は「ラベル」によって数値的に並べ替えることができるようにする必要があります。ここで

{ 
    "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

私は、フィールドの実際のタイプを示しますパイプに新しいパラメータを追加したいです。だから、パイプは、実際のタイプにあなたの配列内のアイテムの文字列フィールドをキャストすることができるようになります：

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を参照してください。

Answer 2

並べ替えには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 3

は、数値、最初と手紙を注文するパイプです：

@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