typescript 如何使用 Angular 2 Pipe 对对象列表进行排序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35167061/
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
How to sort a list of objects using an Angular 2 Pipe
提问by Allan Chau
I am trying to create a pipe that will sort an array of a custom type.
我正在尝试创建一个管道来对自定义类型的数组进行排序。
// custom-object.ts
export class CustomObject {
constructor(
public someString: string,
public someNumber: number
) {}
}
In my html is:
在我的 html 中是：
// custom-object-form.component.ts
<div class="form-group">
<label for="cricos_course_code">Object: </label>
<select class="form-control" required [(ngModel)]="model.someString">
<option *ngFor="#object of (customObjects | sortArrayOfCustomObjects)" [value]="object.someString">{{object.someString}}</option>
</select>
</div>
Then the code for the pipe:
然后是管道的代码：
// sort-custom-object.pipe.ts
import {Pipe, PipeTransform} from 'angular2/core';
import {CustomObject} from '../custom-object';
@Pipe({name: 'sortArrayOfCustomObjects'})
export class SortArrayOfCustomObjectsPipe implements PipeTransform {
transform(arr:Array<CustomObject>): any {
return arr.sort((a, b) => {
if (a.someString > b.someString) {
return 1;
}
if (a.someString < b.someString) {
return -1;
}
// a must be equal to b
return 0;
});
}
}
Now I am getting an error in the console:
现在我在控制台中收到一个错误：
EXCEPTION: TypeError: Cannot read property 'sort' of undefined in [(customObjects | sortArrayOfCustomObjects) in FormComponent@7:24]
回答by SnareChops
Based off of your limited information I believe you want the following.
根据您有限的信息，我相信您需要以下内容。
@Pipe({name: 'sortArrayOfCustomObjects'})
export class SortArrayOfCustomObjectsPipe implements PipeTransform {
transform(arr: CustomObject[], args: any): CustomObject[]{
return arr.sort((a, b) => {
if (a.p1 > b.p1 || a.p2 < b.p2) {
return 1;
}
if (a.p1 < b.p1 || a.p2 > b.p2) {
return -1;
}
return 0;
});
}
}
This will sort the objects first by p1, and then by p2. For instance.
这将首先按 p1 排序对象，然后按 p2。例如。
{p1: 'AA', p2: 3},
{p1: 'CC', p2: 2},
{p1: 'BB', p2: 5},
{p1: 'BB', p2: 1},
{p1: 'AA', p2: 2},
{p1: 'DD', p2: 4}
Would be sorted to
将被排序为
{p1: 'AA', p2: 3},
{p1: 'AA', p2: 2},
{p1: 'BB', p2: 5},
{p1: 'BB', p2: 1},
{p1: 'CC', p2: 2},
{p1: 'DD', p2: 4}
This is based on your comment:
这是基于您的评论：
I have an array of objects that contain properties p1: string, p2: number etc. In my form I want to have 2 select fields that show a list of p1 in alphabetical order and p2 in descending order.
我有一个包含属性 p1：字符串、p2：数字等的对象数组。在我的表单中，我希望有 2 个选择字段，它们按字母顺序显示 p1，按降序显示 p2。
Usage would be
用法是
*ngFor="#item of (items | sortArrayOfCustomObjects)"
UPDATE
更新
For your error that you are now receiving be sure to guard against undefinedvalues in arrays by using a guard.
对于您现在收到的错误，请务必使用保护来防止undefined数组中的值。
transform(arr: CustomObject[], args: any): CustomObject[]{
if(!arr){ return; }
...
}
