Angular2 numeric orderBy管道
Angular2 numeric orderBy pipe
我正在尝试使用自定义管道在 Angular2 中按数值对字符串数组进行排序(我没有编写此管道)。这是管道:
import { Pipe, PipeTransform } from "@angular/core";
@Pipe( { name: 'numericalSort' } )
export class NumericalSortPipe implements PipeTransform {
transform( array: Array<any>, orderField: string, orderType: boolean ): Array<string> {
array.sort( ( a: any, b: any ) => {
let ae = a[ orderField ];
let be = b[ orderField ];
if ( ae == undefined && be == undefined ) return 0;
if ( ae == undefined && be != undefined ) return orderType ? 1 : -1;
if ( ae != undefined && be == undefined ) return orderType ? -1 : 1;
if ( ae == be ) return 0;
return orderType ? (ae.toString().toLowerCase() > be.toString().toLowerCase() ? -1 : 1) : (be.toString().toLowerCase() > ae.toString().toLowerCase() ? -1 : 1);
} );
return array;
}
}
这是对象。我需要能够按“label”进行数字排序。
{
"id" : "12345678",
"accountId" : "123456789",
"label" : "906",
"fullAddress" : {
"zip" : "12345"
}
}
这是示例 HTML:
<div *ngFor="let place of places | numericalSort: 'label'">
<h3>
{{place.label}}
</h3>
...
</div>
我可以按默认字母值排序。如何按数值排序?
您可以使用lodash进行排序。
var myArray = [ 3, 4, 2, 9, 4, 2 ];
_.sortBy(myArray);
// → [ 2, 2, 3, 4, 4, 9 ]
_(myArray).sortBy().take(3).value();
// → [ 2, 2, 3 ]
这是一个先排序数字再排序字母的管道:
@Pipe({name: "orderBy", pure: false})
export class OrderByPipe implements PipeTransform {
transform(array: Array<any>) {
return array.sort((a, b) => {
const [stringA, numberA] = this.order(a);
const [stringB, numberB] = this.order(b);
const comparison = stringA.localeCompare(stringB);
return comparison === 0 ? Number(numberA) - Number(numberB) : comparison;
})
}
order (item) {
const [, stringPart = '', numberPart = 0] = /(^[a-zA-Z]*)(\d*)$/.exec(item) || [];
return [stringPart, numberPart];
}
}
我将向管道添加一个新参数,以指示字段的真实类型。因此,管道将能够将数组中项目的字符串字段转换为真实类型:
export class NumericalSortPipe implements PipeTransform {
transform(array: Array<any>, orderField: string, orderType: boolean, dataType: string): Array<string> {
array.sort((a: any, b: any) => {
let ae = a[orderField];
let be = b[orderField];
if (ae === undefined && be === undefined) return 0;
if (ae === undefined && be !== undefined) return orderType ? 1 : -1;
if (ae !== undefined && be === undefined) return orderType ? -1 : 1;
if (ae === be) return 0;
switch (dataType) {
case "number":
ae = parseFloat(ae);
be = parseFloat(be);
break;
case "string":
ae = ae.toString().toLowerCase();
be = be.toString().toLowerCase();
break;
default:
break;
}
return orderType ? (ae > be ? -1 : 1) : (be > ae ? -1 : 1);
});
return array;
}
}
和用法:
<div *ngFor="let place of places | numericalSort: 'label':false:'number'">
<h3>
{{place.label}}
</h3>
{{place.id}}
</div>
参见plunk。
我正在尝试使用自定义管道在 Angular2 中按数值对字符串数组进行排序(我没有编写此管道)。这是管道:
import { Pipe, PipeTransform } from "@angular/core";
@Pipe( { name: 'numericalSort' } )
export class NumericalSortPipe implements PipeTransform {
transform( array: Array<any>, orderField: string, orderType: boolean ): Array<string> {
array.sort( ( a: any, b: any ) => {
let ae = a[ orderField ];
let be = b[ orderField ];
if ( ae == undefined && be == undefined ) return 0;
if ( ae == undefined && be != undefined ) return orderType ? 1 : -1;
if ( ae != undefined && be == undefined ) return orderType ? -1 : 1;
if ( ae == be ) return 0;
return orderType ? (ae.toString().toLowerCase() > be.toString().toLowerCase() ? -1 : 1) : (be.toString().toLowerCase() > ae.toString().toLowerCase() ? -1 : 1);
} );
return array;
}
}
这是对象。我需要能够按“label”进行数字排序。
{
"id" : "12345678",
"accountId" : "123456789",
"label" : "906",
"fullAddress" : {
"zip" : "12345"
}
}
这是示例 HTML:
<div *ngFor="let place of places | numericalSort: 'label'">
<h3>
{{place.label}}
</h3>
...
</div>
我可以按默认字母值排序。如何按数值排序?
您可以使用lodash进行排序。
var myArray = [ 3, 4, 2, 9, 4, 2 ];
_.sortBy(myArray);
// → [ 2, 2, 3, 4, 4, 9 ]
_(myArray).sortBy().take(3).value();
// → [ 2, 2, 3 ]
这是一个先排序数字再排序字母的管道:
@Pipe({name: "orderBy", pure: false})
export class OrderByPipe implements PipeTransform {
transform(array: Array<any>) {
return array.sort((a, b) => {
const [stringA, numberA] = this.order(a);
const [stringB, numberB] = this.order(b);
const comparison = stringA.localeCompare(stringB);
return comparison === 0 ? Number(numberA) - Number(numberB) : comparison;
})
}
order (item) {
const [, stringPart = '', numberPart = 0] = /(^[a-zA-Z]*)(\d*)$/.exec(item) || [];
return [stringPart, numberPart];
}
}
我将向管道添加一个新参数,以指示字段的真实类型。因此,管道将能够将数组中项目的字符串字段转换为真实类型:
export class NumericalSortPipe implements PipeTransform {
transform(array: Array<any>, orderField: string, orderType: boolean, dataType: string): Array<string> {
array.sort((a: any, b: any) => {
let ae = a[orderField];
let be = b[orderField];
if (ae === undefined && be === undefined) return 0;
if (ae === undefined && be !== undefined) return orderType ? 1 : -1;
if (ae !== undefined && be === undefined) return orderType ? -1 : 1;
if (ae === be) return 0;
switch (dataType) {
case "number":
ae = parseFloat(ae);
be = parseFloat(be);
break;
case "string":
ae = ae.toString().toLowerCase();
be = be.toString().toLowerCase();
break;
default:
break;
}
return orderType ? (ae > be ? -1 : 1) : (be > ae ? -1 : 1);
});
return array;
}
}
和用法:
<div *ngFor="let place of places | numericalSort: 'label':false:'number'">
<h3>
{{place.label}}
</h3>
{{place.id}}
</div>
参见plunk。