角 2 |如何使用管道对数值进行排序？

Question

早安，

如何使用管道对角度 2 中的数值进行排序？还是他们有任何用于排序数字的内置管道？

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

上面是我显示数字的代码，但我想按升序对它们进行排序。

Answer 1

Angular 没有提供排序管道，因为他们似乎认为它会将性能降低到不可接受的程度。但是，我使用了它们并发现它们很有用。你只需要写一个。

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

现在您有了一个通用排序管道，它可以将属性名称是字符串或返回属性值的函数，以及可选的方向。

Answer 2

你可以参考这个排序数字和单词的例子。灵感来自http://embed.plnkr.co/DHLVc0

示例使用

单一类型的基本数组：*ngFor="#todo of todoService.todos | orderBy : '-'"

单列多维数组排序：*ngFor="#todo of todoService.todos | orderBy : ['-status']"

多列多维数组排序：*ngFor="#todo of todoService.todos | orderBy : ['status', '-title']"

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