angular度2sorting和筛选

在Angularjs 1中，可以按以下方式进行sorting和过滤：

<ul ng-repeat="friend in friends | filter:query | orderBy: 'name' "> <li>{{friend.name}}</li> </ul> 

但是我找不到在Angularjs 2.0中如何做这个的例子。 我的问题是如何sorting和筛选Angularjs 2.0？ 如果它仍然不被支持，有没有人知道什么时候或将是否将被放入Angularjs 2.0？

Answer 1

Angular团队希望Angular 2能够缩小运行，所以这并不是开箱即用的。 OrderBy运行的reflection与缩小打破。 看看MiškoHeverey对此事的回应 。

我花时间创build了一个支持单维和multidimensional array的OrderBypipe道。 它也支持能够在multidimensional array的多列上sorting。

 <li *ngFor="let person of people | orderBy : ['-lastName', 'age']">{{person.firstName}} {{person.lastName}}, {{person.age}}</li> 

这个pipe道允许在渲染页面之后向数组添加更多的项目，并且仍然使用新的项目对数组进行正确sorting。

我在这里写下这个过程 。

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

编辑：添加新的演示http://fuelinteractive.github.io/fuel-ui/#/pipe/orderby

编辑2：更新ngFor新语法

Answer 2

这是一个简单的filterpipe道，用于包含带有string值的属性的对象数组（ES6）

filter-array-pipe.js

 import {Pipe} from 'angular2/core'; // # Filter Array of Objects @Pipe({ name: 'filter' }) export class FilterArrayPipe { transform(value, args) { if (!args[0]) { return value; } else if (value) { return value.filter(item => { for (let key in item) { if ((typeof item[key] === 'string' || item[key] instanceof String) && (item[key].indexOf(args[0]) !== -1)) { return true; } } }); } } } 

你的组件

myobjComponent.js

 import {Component} from 'angular2/core'; import {HTTP_PROVIDERS, Http} from 'angular2/http'; import {FilterArrayPipe} from 'filter-array-pipe'; @Component({ templateUrl: 'myobj.list.html', providers: [HTTP_PROVIDERS], pipes: [FilterArrayPipe] }) export class MyObjList { static get parameters() { return [[Http]]; } constructor(_http) { _http.get('/api/myobj') .map(res => res.json()) .subscribe( data => this.myobjs = data, err => this.logError(err)) ); } resetQuery(){ this.query = ''; } } 

在你的模板中

myobj.list.html

 <input type="text" [(ngModel)]="query" placeholder="... filter" > <div (click)="resetQuery()"> <span class="icon-cross"></span> </div> </div> <ul><li *ngFor="#myobj of myobjs| filter:query">...<li></ul> 

Answer 3

pipe道将数据作为input并将其转换为所需的输出。 将这个pipe道文件： orderby.ts添加到你的/app文件夹中。

orderby.ts

 //The pipe class implements the PipeTransform interface's transform method that accepts an input value and an optional array of parameters and returns the transformed value. import { Pipe,PipeTransform } from "angular2/core"; //We tell Angular that this is a pipe by applying the @Pipe decorator which we import from the core Angular library. @Pipe({ //The @Pipe decorator takes an object with a name property whose value is the pipe name that we'll use within a template expression. It must be a valid JavaScript identifier. Our pipe's name is orderby. name: "orderby" }) export class OrderByPipe implements PipeTransform { transform(array:Array<any>, args?) { // Check if array exists, in this case array contains articles and args is an array that has 1 element : !id if(array) { // get the first element let orderByValue = args[0] let byVal = 1 // check if exclamation point if(orderByValue.charAt(0) == "!") { // reverse the array byVal = -1 orderByValue = orderByValue.substring(1) } console.log("byVal",byVal); console.log("orderByValue",orderByValue); array.sort((a: any, b: any) => { if(a[orderByValue] < b[orderByValue]) { return -1*byVal; } else if (a[orderByValue] > b[orderByValue]) { return 1*byVal; } else { return 0; } }); return array; } // } } 

在你的组件文件（app.component.ts）中导入刚刚添加的pipe道： import {OrderByPipe} from './orderby';

然后，如果您想按照id升序排列文章，或者按照orderby:'!id'"sorting，请在模板中添加*ngFor="#article of articles | orderby:'id'" 。

我们使用冒号（：）跟随pipe道名称，然后是参数值，将参数添加到pipe道

我们必须在@Component装饰器的pipe道数组中列出我们的pipe道。 pipes: [ OrderByPipe ] 。

app.component.ts

 import {Component, OnInit} from 'angular2/core'; import {OrderByPipe} from './orderby'; @Component({ selector: 'my-app', template: ` <h2>orderby-pipe by N2B</h2> <p *ngFor="#article of articles | orderby:'id'"> Article title : {{article.title}} </p> `, pipes: [ OrderByPipe ] }) export class AppComponent{ articles:Array<any> ngOnInit(){ this.articles = [ { id: 1, title: "title1" },{ id: 2, title: "title2", }] } } 

更多信息在我的github和这个职位在我的网站上

Answer 4

它不支持devise。 sortBypipe道可能会导致生产规模应用程序的实际性能问题。 这是angular度版本1的问题。

你不应该创build一个自定义的sortingfunction。 相反，你应该sorting你的数组在打字稿文件中，然后显示它。 如果订单需要更新，例如select了下拉菜单，那么让这个下拉菜单select触发一个函数，然后调用你的sorting函数。 这种sortingfunction可以提取到一个服务，以便它可以重新使用。 这样，只有在需要时才能应用sorting，您的应用程序性能将会好得多。

Answer 5

您必须创build自己的pipe道进行数组sorting，这里是一个例子，你怎么能做到这一点。

 <li *ngFor="#item of array | arraySort:'-date'">{{item.name}} {{item.date | date:'medium' }}</li> 

https://plnkr.co/edit/DU6pxr?p=preview

Answer 6

这是我的sorting。 它会做数字sorting，stringsorting和datesorting。

 import { Pipe , PipeTransform } from "@angular/core"; @Pipe({ name: 'sortPipe' }) export class SortPipe implements PipeTransform { transform(array: Array<string>, key: string): Array<string> { console.log("Entered in pipe******* "+ key); if(key === undefined || key == '' ){ return array; } var arr = key.split("-"); var keyString = arr[0]; // string or column name to sort(name or age or date) var sortOrder = arr[1]; // asc or desc order var byVal = 1; array.sort((a: any, b: any) => { if(keyString === 'date' ){ let left = Number(new Date(a[keyString])); let right = Number(new Date(b[keyString])); return (sortOrder === "asc") ? right - left : left - right; } else if(keyString === 'name'){ if(a[keyString] < b[keyString]) { return (sortOrder === "asc" ) ? -1*byVal : 1*byVal; } else if (a[keyString] > b[keyString]) { return (sortOrder === "asc" ) ? 1*byVal : -1*byVal; } else { return 0; } } else if(keyString === 'age'){ return (sortOrder === "asc") ? a[keyString] - b[keyString] : b[keyString] - a[keyString]; } }); return array; } }