Angular2 numerische orderBy Rohr

Question

Ich versuche, ein Array von Zeichenfolgen durch numerischen Wert in Angular2 mit einem benutzerdefinierten Rohr zu sortieren (Ich habe dieses Rohr nicht geschrieben). Hier ist das Rohr:

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

Hier ist das Objekt. Ich muss in der Lage sein, numerisch nach "label" zu sortieren. Hier

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

ist HTML-Beispiel:

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

Ich bin in der Lage durch die Standardwerte alphabetisch zu sortieren. Wie kann ich nach Zahlenwerten sortieren?

Answer 1

ich einen neuen Parameter an das Rohr hinzufügen würde, die die reale Typ eines Feldes anzeigt . So wird das Rohr in der Lage Stringfelder der Elemente in dem Array echte Typen zu werfen:

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

Und Nutzung:

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

Siehe plunk.

Answer 2

können Sie lodash für die Sortierung verwenden.

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

ist hier ein Rohr numerische und dann Buchstaben bestellen:

@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