Angular 2 OrderBypipe道

我无法将这个代码从angualr1翻译成angular2,有什么帮助?

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

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

html模板:

 *ngFor="#todo of todos | sort" 

组件文件:

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

pipe道文件:

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

我敢肯定,错误是在@Pipe,即时通讯尝试sorting的Todos数组,由物业todo.completed命令。 首先todo.completed = false并且比todo.complete = true。

我很诚实,我不太了解转换方法,以及如何在该方法和sorting方法中传递参数。

比如,args:string参数是什么? a和b,他们是什么? 他们从哪里来?

有关完整的讨论,请参阅https://angular.io/docs/ts/latest/guide/pipes.html#!#no-filter-pipe 。 这个引用是最相关的。 基本上,对于大规模应用程序,应该积极缩小过滤和sorting逻辑应该移动到组件本身。

“我们有些人可能并不在意这样做,这是我们的select,但是Angular产品不应该阻止其他人积极进行缩小,因此,Angular团队决定在Angular中发布的所有东西都会安全地缩小。

Angular团队和许多经验丰富的Angular开发人员强烈build议您将筛选和sorting逻辑移入组件本身。 该组件可以公开一个filteredHeroes或sortedHeroes属性,并控制执行支持逻辑的时间和频率。 你可以在pipe道中放置任何function,并在应用程序中共享,这些function可以写入一个过滤/sorting服务并注入组件。

你可以实现一个自定义pipe道,利用数组的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; } } 

然后使用这个pipe道,如下所述。 不要忘记将pipe道指定到组件的pipes属性中:

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

这是一个带有string值的数组的简单示例,但您可以进行一些高级sorting处理(基于对象数组的对象属性,基于sorting参数,…)。

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

希望它能帮助你,Thierry

我修改了@Thierry Templier的响应,以便pipe道可以按照angular4sorting自定义对象:

 import { Pipe } from "@angular/core"; @Pipe({ name: "sort" }) export class ArraySortPipe { transform(array: any[], field: string): any[] { 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; } } 

并使用它:

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

希望这有助于某人。

我已经创build了一个OrderBypipe道,只是你需要的。 它支持能够在一个枚举对象的多个列上进行sorting。

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

这个pipe道允许在渲染页面之后向数组添加更多的项目,并且dynamic地对数组进行sorting。

我在这里写下这个过程 。

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

Angular没有提供一个orderByfilter,但是如果我们决定需要一个,我们可以轻松地创build一个。 但是有一些警告我们需要注意速度和缩小。 见下文。

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

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

这个pipe道接受一个sorting函数( fn ),并给它一个默认值,以合理的方式sorting一个基元数组。 如果我们愿意,我们可以select重写这种sortingfunction。

它不接受属性名称作为string,因为属性名称会被缩小。 当我们缩小代码时,它们会改变,但是缩小器不够聪明,也不能缩小模板string中的值。

排列基元(数字和string)

我们可以使用这个来使用默认的比较器对数组或数组进行sorting:

 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'] } 

sorting对象数组

如果我们想sorting一个对象数组,我们可以给它一个比较函数。

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

注意事项 – 纯粹与不纯的pipe道

Angular 2有一个纯粹而不纯的pipe道的概念。

纯pipe道使用对象标识来优化更改检测。 这意味着只有当input对象改变了标识时,pipe道才会运行,例如,如果我们向数组添加新的项目。 它不会落入对象。 这意味着如果我们改变一个嵌套的属性: this.cats[2].name = "Fluffy" ,pipe道将不会重新运行。 这有助于Angular快速。 angularpipe是默认的纯粹的。

另一方面, 不纯的pipe道将检查对象属性。 这可能会使速度变慢。 因为它不能保证pipe道function将做什么(可能是根据一天的时间不同来sorting), 每当发生asynchronous事件时,都会运行不纯的pipe道。 如果数组很大,这会使您的应用程序变慢。

上面的pipe道是纯净的。 这意味着只有当数组中的对象是不可变的时候才会运行。 如果你改变一只猫,你必须用一个新的猫replace整个猫对象。

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

我们可以通过设置纯属性来将上面的内容更改为不纯的pipe道:

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

这条pipe道将下降到对象,但会更慢。 谨慎使用。

更新OrderByPipe:固定不sorting的string。

创build一个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:要sorting的对象字段名称;

OrderByType:boolean; 真:降序; 假:升序;

这将适用于您传递给它的任何字段。 ( 重要说明:它只会按字母顺序排列,所以如果你通过一个date,它会按照字母sorting而不是date)

 /* * 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"ta 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 }); } } } 

build议你使用angular度lodash,然后你的pipe道将是下一个:

 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, ...], ... }) 

在当前版本的Angular2中,不支持orderBy和ArraySortpipe道。 您需要为此写入/使用一些自定义pipe道。

由于我们知道filter和命令是从angular度2中删除,我们需要写我们自己的,这里是一个很好的例子,在plunker和详细的文章

它同时使用filter和orderby,这里是订单pipe道的代码

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

这可以很好的替代AngularJs的order by pipe 4 。 简单易用。

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