angular - OrderBy 管道问题

Question

我无法将此代码从 Angular 1 转换为 Angular 2：

ng-repeat="todo in todos | orderBy: 'completed'"

这是我在 Thierry Templier 的回答之后所做的：

组件模板：

*ngFor="#todo of todos | sort"

组件代码：

@Component({
    selector: 'my-app',
    templateUrl: "./app/todo-list.component.html",
    providers: [TodoService],
    pipes: [ TodosSortPipe ]

})

管道代码：

import { Pipe } from "angular2/core";
import {Todo} from './todo';

@Pipe({
  name: "sort"
})
export class TodosSortPipe {
  transform(array: Array<Todo>, args: string): Array<Todo> {
    array.sort((a: any, b: any) => {
      if (a < b) {
        return -1;
      } else if (a > b) {
        return 1;
      } else {
        return 0;
      }
    });
    return array;
  }
}

我正在尝试对Todo按属性排序的 s数组进行排序completed。首先todo.completed = false，然后是todo.complete = true.

我不太了解该transform方法以及如何在该方法和该sort方法中传递参数。

args: string论据是什么？它们是什么a以及b它们来自哪里？

score 95 · Accepted Answer

I modified @Thierry Templier's response so the pipe can sort custom objects in angular 4:

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

@Pipe({
  name: "sort"
})
export class ArraySortPipe  implements PipeTransform {
  transform(array: any, field: string): any[] {
    if (!Array.isArray(array)) {
      return;
    }
    array.sort((a: any, b: any) => {
      if (a[field] < b[field]) {
        return -1;
      } else if (a[field] > b[field]) {
        return 1;
      } else {
        return 0;
      }
    });
    return array;
  }
}

And to use it:

*ngFor="let myObj of myArr | sort:'fieldName'"

Hopefully this helps someone.

score 76 · Accepted Answer

有关完整讨论，请参阅https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe。这句话是最相关的。基本上，对于应该积极缩小的大型应用程序，过滤和排序逻辑应该转移到组件本身。

“我们中的一些人可能不关心积极地缩小这个。这是我们的选择。但是 Angular 产品不应该阻止其他人积极地缩小。因此，Angular 团队决定在 Angular 中发布的所有内容都将安全地缩小。

Angular 团队和许多经验丰富的 Angular 开发人员强烈建议您将过滤和排序逻辑移至组件本身。该组件可以公开filteredHeroes 或sortedHeroes 属性并控制执行支持逻辑的时间和频率。您可以放入管道中并在应用程序中共享的任何功能都可以写入过滤/排序服务并注入到组件中。”

score 43 · Accepted Answer

您可以为此实现一个自定义管道，该管道利用sort数组的方法：

import { Pipe } from "angular2/core";

@Pipe({
  name: "sort"
})
export class ArraySortPipe {
  transform(array: Array<string>, args: string): Array<string> {
    array.sort((a: any, b: any) => {
      if (a < b) {
        return -1;
      } else if (a > b) {
        return 1;
      } else {
        return 0;
      }
    });
    return array;
  }
}

然后使用这个管道，如下所述。不要忘记pipes在组件的属性中指定您的管道：

@Component({
  (...)
  template: `
    <li *ngFor="list | sort"> (...) </li>
  `,
  pipes: [ ArraySortPipe ]
})
(...)

这是具有字符串值的数组的简单示例，但您可以进行一些高级排序处理（在对象数组的情况下基于对象属性，基于排序参数，...）。

这是一个 plunkr：https ://plnkr.co/edit/WbzqDDOqN1oAhvqMkQRQ?p=preview 。

希望它可以帮助你，蒂埃里

score 11 · Accepted Answer

更新了 OrderByPipe：修复了不对字符串进行排序的问题。

创建一个 OrderByPipe 类：

import { Pipe, PipeTransform } from "@angular/core";
@Pipe( {
name: 'orderBy'
} )
export class OrderByPipe 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;
  }
}

在您的控制器中：

@Component({
pipes: [OrderByPipe]
})

或在您的

 declarations: [OrderByPipe]

在您的 html 中：

<tr *ngFor="let obj of objects | orderBy : ObjFieldName: OrderByType">

ObjFieldName：要排序的对象字段名；

OrderByType：布尔值；true：降序；错误：上升；

score 9 · Accepted Answer

Angular 没有开箱即用的 orderBy 过滤器，但如果我们决定需要一个，我们可以轻松地制作一个。然而，我们需要注意一些与速度和缩小有关的警告。见下文。

一个简单的管道看起来像这样。

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

@Pipe({
  name: 'sort'
})
export class SortPipe implements PipeTransform {
  transform(ary: any, fn: Function = (a,b) => a > b ? 1 : -1): any {
    return ary.sort(fn)
  }
}

该管道接受一个排序函数 ( fn)，并为其提供一个默认值，该值将以合理的方式对一组基元进行排序。如果我们愿意，我们可以选择覆盖这个排序函数。

它不接受属性名称作为字符串，因为属性名称会被缩小。当我们缩小代码时，它们会发生变化，但缩小器不够聪明，无法同时缩小模板字符串中的值。

排序原语（数字和字符串）

我们可以使用它来使用默认比较器对数字或字符串数组进行排序：

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

@Component({
  selector: 'cat',
  template: `
    {{numbers | sort}}
    {{strings | sort}}
  `
})
export class CatComponent
  numbers:Array<number> = [1,7,5,6]
  stringsArray<string> = ['cats', 'hats', 'caveats']
}

对对象数组进行排序

如果我们想对一个对象数组进行排序，我们可以给它一个比较器函数。

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

@Component({
  selector: 'cat',
  template: `
    {{cats | sort:byName}}
  `
})
export class CatComponent
  cats:Array<Cat> = [
    {name: "Missy"},
    {name: "Squoodles"},
    {name: "Madame Pompadomme"}
  ]
  byName(a,b) {
    return a.name > b.name ? 1 : -1
  }
}

注意事项 - 纯管道与不纯管道

Angular 2 有纯管道和非纯管道的概念。

纯管道使用对象标识优化更改检测。这意味着管道只会在输入对象更改身份时运行，例如，如果我们向数组添加新项目。它不会下降到物体中。这意味着如果我们更改嵌套属性：this.cats[2].name = "Fluffy"例如，管道将不会重新运行。这有助于 Angular 更快。Angular 管道默认是纯的。

另一方面，不纯管道将检查对象属性。这可能会使其速度变慢。因为它不能保证管道函数会做什么（例如，它可能根据一天中的时间进行不同的排序），所以每次发生异步事件时都会运行不纯管道。如果数组很大，这将大大减慢您的应用程序。

上面的管道是纯净的。这意味着它只会在数组中的对象不可变时运行。如果你改变一只猫，你必须用一个新的猫对象替换整个猫对象。

this.cats[2] = {name:"Tomy"}

我们可以通过设置 pure 属性将上述内容更改为不纯管道：

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

@Pipe({
  name: 'sort',
  pure: false
})
export class SortPipe implements PipeTransform {
  transform(ary: any, fn: Function = (a,b) => a > b ? 1 : -1): any {
    return ary.sort(fn)
  }
}

该管道将下降到对象中，但速度会较慢。谨慎使用。

score 7 · Accepted Answer

我创建了一个 OrderBy 管道，它可以满足您的需要。它还支持对可枚举对象的多列进行排序。

<li *ngFor="#todo in todos | orderBy : ['completed']">{{todo.name}} {{todo.completed}}</li>

此管道允许在呈现页面后向数组添加更多项，并将使用更新动态对数组进行排序。

我在这里写了一个关于这个过程的文章。

这是一个工作演示： http: //fuelinteractive.github.io/fuel-ui/#/pipe/orderby和https://plnkr.co/edit/DHLVc0?p=info

score 5 · Accepted Answer

推荐你使用带角度的 lodash，然后你的管道将是下一个：

import {Pipe, PipeTransform} from '@angular/core';
import * as _ from 'lodash'
@Pipe({
    name: 'orderBy'
})
export class OrderByPipe implements PipeTransform {

    transform(array: Array<any>, args?: any): any {
        return _.sortBy(array, [args]);
    }

}

并在 html 中使用它

*ngFor = "#todo of todos | orderBy:'completed'"

并且不要忘记将 Pipe 添加到您的模块

@NgModule({
    ...,
    declarations: [OrderByPipe, ...],
    ...
})

score 4 · Accepted Answer

这适用于您传递给它的任何字段。（重要提示：它只会按字母顺序排序，因此如果您传递一个日期，它将按字母顺序而不是日期）

/*
 *      Example use
 *      Basic Array of single type: *ngFor="let todo of todoService.todos | orderBy : '-'"
 *      Multidimensional Array Sort on single column: *ngFor="let todo of todoService.todos | orderBy : ['-status']"
 *      Multidimensional Array Sort on multiple columns: *ngFor="let todo of todoService.todos | orderBy : ['status', '-title']"
 */

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

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

    value: string[] = [];

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

        if (a === null || typeof a === "undefined") { a = 0; }
        if (b === null || typeof b === "undefined") { b = 0; }

        if (
            (isNaN(parseFloat(a)) ||
            !isFinite(a)) ||
            (isNaN(parseFloat(b)) || !isFinite(b))
        ) {
            // Isn"t a number so lowercase the string to properly compare
            a = a.toString();
            b = b.toString();
            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
    }

    public transform(input: any, config = "+"): any {
        if (!input) { return input; }

        // make a copy of the input"s reference
        this.value = [...input];
        let value = this.value;
        if (!Array.isArray(value)) { return value; }

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

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

                return value.sort(function(a: any, b: any) {
                    let aValue = a[property];
                    let bValue = b[property];

                    let propertySplit = property.split(".");

                    if (typeof aValue === "undefined" && typeof bValue === "undefined" && propertySplit.length > 1) {
                        aValue = a;
                        bValue = b;
                        for (let j = 0; j < propertySplit.length; j++) {
                            aValue = aValue[propertySplit[j]];
                            bValue = bValue[propertySplit[j]];
                        }
                    }

                    return !desc
                        ? OrderByPipe._orderByComparator(aValue, bValue)
                        : -OrderByPipe._orderByComparator(aValue, bValue);
                });
            }
        } else {
            // Loop over property of the array in order and sort
            return value.sort(function(a: any, b: any) {
                for (let i = 0; i < config.length; i++) {
                    let desc = config[i].substr(0, 1) === "-";
                    let property = config[i].substr(0, 1) === "+" || config[i].substr(0, 1) === "-"
                        ? config[i].substr(1)
                        : config[i];

                    let aValue = a[property];
                    let bValue = b[property];

                    let propertySplit = property.split(".");

                    if (typeof aValue === "undefined" && typeof bValue === "undefined" && propertySplit.length > 1) {
                        aValue = a;
                        bValue = b;
                        for (let j = 0; j < propertySplit.length; j++) {
                            aValue = aValue[propertySplit[j]];
                            bValue = bValue[propertySplit[j]];
                        }
                    }

                    let comparison = !desc
                        ? OrderByPipe._orderByComparator(aValue, bValue)
                        : -OrderByPipe._orderByComparator(aValue, bValue);

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

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

score 3 · Accepted Answer

这是angular 4中 AngularJs orderby管道的良好替代品。简单易用。

这是 github URL 以获取更多信息 https://github.com/VadimDez/ngx-order-pipe

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

@Pipe({
  name: 'orderBy'
})
export class OrderPipe implements PipeTransform {

  transform(value: any | any[], expression?: any, reverse?: boolean): any {
    if (!value) {
      return value;
    }

    const isArray = value instanceof Array;

    if (isArray) {
      return this.sortArray(value, expression, reverse);
    }

    if (typeof value === 'object') {
      return this.transformObject(value, expression, reverse);
    }

    return value;
  }

  /**
   * Sort array
   *
   * @param value
   * @param expression
   * @param reverse
   * @returns {any[]}
   */
  private sortArray(value: any[], expression?: any, reverse?: boolean): any[] {
    const isDeepLink = expression && expression.indexOf('.') !== -1;

    if (isDeepLink) {
      expression = OrderPipe.parseExpression(expression);
    }

    let array: any[] = value.sort((a: any, b: any): number => {
      if (!expression) {
        return a > b ? 1 : -1;
      }

      if (!isDeepLink) {
        return a[expression] > b[expression] ? 1 : -1;
      }

      return OrderPipe.getValue(a, expression) > OrderPipe.getValue(b, expression) ? 1 : -1;
    });

    if (reverse) {
      return array.reverse();
    }

    return array;
  }


  /**
   * Transform Object
   *
   * @param value
   * @param expression
   * @param reverse
   * @returns {any[]}
   */
  private transformObject(value: any | any[], expression?: any, reverse?: boolean): any {
    let parsedExpression = OrderPipe.parseExpression(expression);
    let lastPredicate = parsedExpression.pop();
    let oldValue = OrderPipe.getValue(value, parsedExpression);

    if (!(oldValue instanceof Array)) {
      parsedExpression.push(lastPredicate);
      lastPredicate = null;
      oldValue = OrderPipe.getValue(value, parsedExpression);
    }

    if (!oldValue) {
      return value;
    }

    const newValue = this.transform(oldValue, lastPredicate, reverse);
    OrderPipe.setValue(value, newValue, parsedExpression);
    return value;
  }

  /**
   * Parse expression, split into items
   * @param expression
   * @returns {string[]}
   */
  private static parseExpression(expression: string): string[] {
    expression = expression.replace(/\[(\w+)\]/g, '.$1');
    expression = expression.replace(/^\./, '');
    return expression.split('.');
  }

  /**
   * Get value by expression
   *
   * @param object
   * @param expression
   * @returns {any}
   */
  private static getValue(object: any, expression: string[]) {
    for (let i = 0, n = expression.length; i < n; ++i) {
      const k = expression[i];
      if (!(k in object)) {
        return;
      }
      object = object[k];
    }

    return object;
  }

  /**
   * Set value by expression
   *
   * @param object
   * @param value
   * @param expression
   */
  private static setValue(object: any, value: any, expression: string[]) {
    let i;
    for (i = 0; i < expression.length - 1; i++) {
      object = object[expression[i]];
    }

    object[expression[i]] = value;
  }
}

score 3 · Accepted Answer

您可以将其用于对象：

@Pipe({
  name: 'sort',
})
export class SortPipe implements PipeTransform {

  transform(array: any[], field: string): any[] {
    return array.sort((a, b) => a[field].toLowerCase() !== b[field].toLowerCase() ? a[field].toLowerCase() < b[field].toLowerCase() ? -1 : 1 : 0);
  }

}

score 2 · Accepted Answer

正如我们所知，过滤器和排序依据已从 ANGULAR 2 中删除，我们需要自己编写，这里有一个关于plunker和详细文章的好例子

它同时使用了过滤器和orderby，这是订单管道的代码

import { Pipe, PipeTransform } from '@angular/core';    
@Pipe({  name: 'orderBy' })
export class OrderrByPipe implements PipeTransform {

  transform(records: Array<any>, args?: any): any {       
    return records.sort(function(a, b){
          if(a[args.property] < b[args.property]){
            return -1 * args.direction;
          }
          else if( a[args.property] > b[args.property]){
            return 1 * args.direction;
          }
          else{
            return 0;
          }
        });
    };
 }

score 2 · Accepted Answer

在 package.json 中，添加类似的内容（此版本适用于 Angular 2）：

  "ngx-order-pipe": "^1.1.3",

在您的打字稿模块（和导入数组）中：

  import { OrderModule } from 'ngx-order-pipe';

score 0 · Accepted Answer

添加到 Vitali 的回复中，关于旧的文档/pipes#appendix-no-filterpipe-or-orderbypipe由于某种原因不再可用。这里正在讨论它：https ://github.com/angular/angular/issues/41652 。

score 0 · Accepted Answer

<!-- const cars=['Audi','Merc','BMW','Volvo','Tesla'] -->

<ul>
  <li *ngFor="let car of cars">{{car}}</li>
</ul>


/*
 *ngFor="let c of oneDimArray | sortBy:'asc'"
 *ngFor="let c of arrayOfObjects | sortBy:'asc':'propertyName'"
*/
import { Pipe, PipeTransform } from '@angular/core';
import { orderBy } from 'lodash';

@Pipe({ name: 'sortBy' })
export class SortByPipe implements PipeTransform {

  transform(value: any[], order = '', column: string = ''): any[] {
    if (!value || order === '' || !order) { return value; } // no array
    if (!column || column === '') { return sortBy(value); } // sort 1d array
    if (value.length <= 1) { return value; } // array with only one item
    return orderBy(value, [column], [order]);
  }
}

score 0 · Accepted Answer

Angular JS中的 orderby Pipe将支持，但Angular（更高版本）不支持. 请找到他讨论的细节，以提高性能速度它已经过时了。

https://angular.io/guide/styleguide#do-not-add-filtering-and-sorting-logic-to-pipes

score 0 · Accepted Answer

对于 Angular 5+ 版本，我们可以使用ngx-order-pipe 包

源码教程链接

安装包

$ npm install ngx-order-pipe --save

在应用程序模块中导入

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { OrderModule } from 'ngx-order-pipe';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    OrderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在任何地方使用

  <ul>
    <li *ngFor="let item of (dummyData | orderBy:'name') ">
      {{item.name}}
    </li>
  </ul>

score 0 · Accepted Answer

在当前版本的 Angular2 中，不支持 orderBy 和 ArraySort 管道。您需要为此编写/使用一些自定义管道。

score -1 · Accepted Answer

Component template:
todos| sort: ‘property’:’asc|desc’

Pipe code:

import { Pipe,PipeTransform  } from "angular/core";
import {Todo} from './todo';

@Pipe({
  name: "sort"
})
export class TodosSortPipe implements PipeTransform {
  transform(array: Array<Todo>, args: string): Array<Todo> {
    array.sort((a: any, b: any) => {
      if (a < b) {
        return -1;
      } else if (a > b) {
        return 1;
      } else {`enter code here`
        return 0;
      }
    });
    return array;
  }
}

angular - OrderBy 管道问题

18 回答 18

排序原语（数字和字符串）

对对象数组进行排序

注意事项 - 纯管道与不纯管道

Related

Reference