Winkel 2 | Wie sortiere ich numerischen Wert mit Pipe?

Question

Guten Tag,

Wie kann ich numerischen Wert in Winkel 2 mit Rohren sortieren? oder sind ihre eingebauten Rohre zum Sortieren von Zahlen?

<div class="group group1"> 
<div *ngFor="let apidata of data"> 
    <div *ngIf="apidata.AssignmentNumber[0] == 1" class="box"> 
     <div class="box-assignmentnumber-holder"> 
     <span id="AssignmentNumber" [ngStyle]="{'color': apidata.AssignmentNumber[1] == 1 ? '#FF8C00' : 'green'}">{{apidata.AssignmentNumber | desc}}</span> 
     </div> 
     <div id="arrow" (click)="this.clickMe =! this.clickMe"></div> 
    </div> 
</div> 

oben ist meine Codenummer bei der Anzeige, aber ich möchte, dass sie in aufsteigender Reihenfolge sortieren.

Answer 1

Sie können dieses Beispiel der Sortierung von Zahlen und Wörtern beziehen. dies wird von http://embed.plnkr.co/DHLVc0 inspiriert

Beispiel

Grund Array einzelner Typ verwenden: * ngFor = "# todo von todoService.todos | orderBy: '-'"

mehrdimensionales Array sortieren auf einzelne Spalte: * ngFor = "# todo von todoService.todos | orderBy: ['-status']"

Mehrdimensionales Array Sortieren nach mehreren Spalten: * ngFor = "# todo von todoService.todos | orderBy: ['status', '- Titel '] "

orderBy.ts 

     import {Pipe, PipeTransform} from 'angular2/core'; 

     @Pipe({name: 'orderBy', pure: false}) 
     export class OrderBy implements PipeTransform { 

      static _orderByComparator(a:any, b:any):number{ 

       if((isNaN(parseFloat(a)) || !isFinite(a)) || (isNaN(parseFloat(b)) || !isFinite(b))){ 
       //Isn't a number so lowercase the string to properly compare 
       if(a.toLowerCase() < b.toLowerCase()) return -1; 
       if(a.toLowerCase() > b.toLowerCase()) return 1; 
       } 
       else{ 
       //Parse strings as numbers to compare properly 
       if(parseFloat(a) < parseFloat(b)) return -1; 
       if(parseFloat(a) > parseFloat(b)) return 1; 
       } 

       return 0; //equal each other 
      } 

      transform(input:any, [config = '+']): any{ 

       if(!Array.isArray(input)) return input; 

       if(!Array.isArray(config) || (Array.isArray(config) && config.length == 1)){ 
        var propertyToCheck:string = !Array.isArray(config) ? config : config[0]; 
        var desc = propertyToCheck.substr(0, 1) == '-'; 

        //Basic array 
        if(!propertyToCheck || propertyToCheck == '-' || propertyToCheck == '+'){ 
         return !desc ? input.sort() : input.sort().reverse(); 
        } 
        else { 
         var property:string = propertyToCheck.substr(0, 1) == '+' || propertyToCheck.substr(0, 1) == '-' 
          ? propertyToCheck.substr(1) 
          : propertyToCheck; 

         return input.sort(function(a:any,b:any){ 
          return !desc 
           ? OrderBy._orderByComparator(a[property], b[property]) 
           : -OrderBy._orderByComparator(a[property], b[property]); 
         }); 
        } 
       } 
       else { 
        //Loop over property of the array in order and sort 
        return input.sort(function(a:any,b:any){ 
         for(var i:number = 0; i < config.length; i++){ 
          var desc = config[i].substr(0, 1) == '-'; 
          var property = config[i].substr(0, 1) == '+' || config[i].substr(0, 1) == '-' 
           ? config[i].substr(1) 
           : config[i]; 

          var comparison = !desc 
           ? OrderBy._orderByComparator(a[property], b[property]) 
           : -OrderBy._orderByComparator(a[property], b[property]); 

          //Don't return 0 yet in case of needing to sort by next property 
          if(comparison != 0) return comparison; 
         } 

         return 0; //equal each other 
        }); 
       } 
      } 
     } 

Answer 2

Angular liefert kein Sortierrohr, da sie der Meinung sind, dass es die Leistung zu einem nicht akzeptablen Grad verschlechtert. Allerdings habe ich sie eingesetzt und festgestellt, dass sie nützlich sind. Sie müssen nur einen schreiben.

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

@Pipe({name: 'sortBy'}) export class SortBy { 
    transform<T>(
    values: T[] | undefined, 
    by: keyof T | ((x: T) => any), 
    direction?: 'ascending' | 'descending' 
) { 
    const thrust = direction || 'ascending'; 

    const getKey = typeof by === 'function' ? by : ((x: T) => x[by]); 

    return values && values.slice().sort((x, y) => { 
    const xKey = String(getKey(x)); 
    const yKey = String(getKey(y)); 
    return thrust === 'ascending' 
     ? xKey.localeCompare(yKey) 
     : yKey.localeCompare(xKey); 
    }); 
    } 
} 

Jetzt haben Sie eine generische Sortierrohr, das den Namen der Eigenschaft ein String oder eine Funktion, die einen Eigenschaftswert zurückgibt, und gegebenenfalls eine Richtung erfolgen kann.