在Angularjs 1中，可以按以下方式排序和过滤：
<ul ng-repeat="friend in friends | filter:query | orderBy: 'name' ">
<li>{{friend.name}}</li>
</ul>
但我在Angularjs 2.0中找不到任何如何做到这一点的例子。我的问题是如何在Angularjs 2.0中进行排序和过滤？如果它仍然不受支持，是否有人知道何时或是否将它放入Angularjs 2.0？
答案 0 :(得分：77)
这并没有开箱即用，因为Angular团队希望Angular 2能够进行缩小。 OrderBy运行了反射，它会缩小。查看有关此事的Miško Heverey's response。
我花时间创建了一个支持单维和多维数组的OrderBy管道。它还支持能够对多维数组的多个列进行排序。
<li *ngFor="let person of people | orderBy : ['-lastName', 'age']">{{person.firstName}} {{person.lastName}}, {{person.age}}</li>
此管道允许在呈现页面后向阵列添加更多项目，并仍然正确地使用新项目对数组进行排序。
我有write up on the process here。
这是一个有效的演示：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到新语法
答案 1 :(得分：18)
这是一个简单的过滤器管道，用于包含带字符串值（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>
答案 2 :(得分：17)
设计不支持。 sortBy管道可能会导致生产规模应用程序出现真正的性能问题。这是角度版本1的问题。
您不应该创建自定义排序功能。相反，您应该首先在typescript文件中对数组进行排序，然后显示它。如果在选择下拉列表时需要更新订单，则让此下拉列表选项触发一个函数并调用从中调用的排序函数。可以将此排序功能提取到服务中，以便可以重复使用它。这样，只有在需要时才会应用排序，并且您的应用程序性能会更好。
答案 3 :(得分：13)
管道将数据作为输入并将其转换为所需的输出。
在orderby.ts文件夹中添加此管道文件：/app。
//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）中，使用以下内容导入刚刚添加的管道：import {OrderByPipe} from './orderby';
然后，如果您希望按ID按升序排序文章或按*ngFor="#article of articles | orderby:'id'"降序排序，请在模板中添加orderby:'!id'"。
我们通过使用冒号（:)跟随管道名称然后参数值
来向管道添加参数我们必须在@Component装饰器的pipes数组中列出我们的管道。 pipes: [ OrderByPipe ]。
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",
}]
}
}
答案 4 :(得分：4)
你必须创建自己的数组排序管道，这里有一个例子，你怎么能这样做。
<li *ngFor="#item of array | arraySort:'-date'">{{item.name}} {{item.date | date:'medium' }}</li>
答案 5 :(得分：1)
这是我的排序。它将进行数字排序，字符串排序和日期排序。
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;
}
}