在 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 中？
【问题讨论】：
friends进行排序吗？
标签： angular typescript
这不是开箱即用的，因为 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 更新为新语法
【讨论】：
[][]，所以你是对的。多层次会是更好的措辞吗？ [].SomeObjectProperty.SomeProperty
设计不支持。 sortBy 管道可能会导致生产规模应用程序的实际性能问题。这是 Angular 版本 1 的问题。
您不应创建自定义排序函数。相反，您应该首先在 typescript 文件中对数组进行排序，然后再显示它。如果在选择下拉列表时需要更新订单，则让此下拉选择触发一个函数并调用从中调用的排序函数。可以将此排序功能提取到服务中，以便可以重新使用它。这样，排序只会在需要时应用，您的应用程序性能会更好。
【讨论】：
moment 或moment-timezone，这是一个没有明显替换的常见功能（顺便说一句。请参阅外部包angular2-moment 以获取相应的管道以获取瞬间的东西 - 这也表明做一个是多么容易填补空白的插件）
这是一个简单的过滤器管道，用于包含带有字符串值的属性的对象数组（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>
【讨论】：
transform(value: ..., args: ...) 和带有 let 的变量声明中添加类型。
filter 是一个数组函数，所以这只适用于对象列表而不是对象本身，希望对您有所帮助。
管道将数据作为输入并将其转换为所需的输出。
将此管道文件：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 升序或orderby:'!id'" 降序对文章进行排序，请在模板中添加 *ngFor="#article of articles | orderby:'id'"。
我们通过在管道名称后跟一个冒号（:）然后是参数值来向管道添加参数
我们必须在 @Component 装饰器的管道数组中列出我们的管道。 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",
}]
}
}
【讨论】：
您必须为数组排序创建自己的管道，这是一个示例。
<li *ngFor="#item of array | arraySort:'-date'">{{item.name}} {{item.date | date:'medium' }}</li>
【讨论】：
let column = args[0].slice(1); 命令使列只是ate，即显然不再是有效的密钥了。
这是我喜欢的。它将进行数字排序、字符串排序和日期排序。
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;
}
}
【讨论】：