Javascript Angular 2. 如何申请orderBy？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35461203/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2. How to apply orderBy?
提问by Edward
I have a piece of code.
我有一段代码。
<table class="table table-bordered table-condensed" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr *ngFor="#participant of participants; #i = index">
<td>{{i+1}}</td>
<td>{{participant.username}}</td>
<td>{{participant.score}}</td>
</tr>
</tbody>
</table>In Angular 1 i have orderByfilter to order rows by my filter. But how can i do orderBy in Angular 2 the same way ? Thank you.
在 Angular 1 中，我有orderBy过滤器来按我的过滤器对行进行排序。但是我怎样才能在 Angular 2 中以同样的方式进行 orderBy 呢？谢谢你。
回答by Alex Chuev
If you are using lodashyour pipe can be like this:
如果你正在使用lodash你的管道可以是这样的：
import { Pipe, PipeTransform } from '@angular/core';
import { orderBy } from 'lodash';
@Pipe({
name: 'orderBy'
})
export class OrderByPipe implements PipeTransform {
transform = orderBy;
}
And then you can use all the power of the method:
然后您可以使用该方法的所有功能：
<li *ngFor="let product of products | orderBy: 'price': 'desc'">
{{product.name}}
</li>
回答by Thierry Templier
You need to implement a custom pipe for this. This corresponds to create a class decorated by @Pipe. Here is a sample. Its transform method will actually handle the list and you will be able to sort it as you want:
您需要为此实现自定义管道。这对应于创建一个由@Pipe 修饰的类。这是一个示例。它的 transform 方法将实际处理列表，您将能够根据需要对其进行排序：
import { Pipe } from "angular2/core";
@Pipe({
name: "orderby"
})
export class OrderByPipe {
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;
}
}
You can then use this pipe as described below in expressions. For example in an ngFor. Don't forget to specify your pipe into the pipesattribute of the component where you use it:
然后，您可以按照以下表达式中的说明使用此管道。例如在 ngFor 中。不要忘记将您的管道指定到pipes您使用它的组件的属性中：
@Component({
(...)
template: `
<li *ngFor="list | orderby"> (...) </li>
`,
pipes: [ OrderByPipe ]
})
(...)
回答by Edward
Thank you for your answers. I have written workable code below:
谢谢您的回答。我在下面编写了可行的代码：
@Pipe({name: 'orderBy'})
export class orderBy implements PipeTransform {
transform(obj: any, orderFields: string): any {
orderFields.forEach(function(currentField) {
var orderType = 'ASC';
if (currentField[0] === '-') {
currentField = currentField.substring(1);
orderType = 'DESC';
}
obj.sort(function(a, b) {
if (orderType === 'ASC') {
if (a[currentField] < b[currentField]) return -1;
if (a[currentField] > b[currentField]) return 1;
return 0;
} else {
if (a[currentField] < b[currentField]) return 1;
if (a[currentField] > b[currentField]) return -1;
return 0;
}
});
});
return obj;
}
}This code consider order direction DESC or ASC. The usage:
此代码考虑订单方向 DESC 或 ASC。用法：
<tr *ngFor="#participant of participants | orderBy: '-score'; #i = index">