如何按 属性 使用 ngFor 对对象数组进行排序
how sort array with object by property use ngFor
我需要在 table 排序数据中显示
js
let array = [
{idx: number, name: string, btn: number, index: number},
{idx: number, name: string, btn: number, index: number},
{idx: number, name: string, btn: number, index: number}
]
html
<tr *ngFor="let ticket of array">
<td>{{ticket.name}}</td>
<td>{{ticket.btn}}</td>
<td>{{ticket.index}}</td>
<tr>
我需要按索引值排序显示
let array = [
{ idx: 1, name: 'a', btn: 1, index: 2 },
{ idx: 2, name: 'b', btn: 2, index: 3 },
{ idx: 3, name: 'c', btn: 3, index: 1 }
];
// descending
let newarr = array.sort((a, b) => b.index - a.index);
//ascending
let newarr = array.sort((a, b) => a.index - b.index);
console.log(newarr);
您可以只使用排序数组:
function sortFunc(a, b) {
if ( a.index < b.index ){
return -1;
}
if ( a.index > b.index ){
return 1;
}
return 0;
}
let array = [
{idx: number, name: string, btn: number, index: number},
{idx: number, name: string, btn: number, index: number},
{idx: number, name: string, btn: number, index: number}
].sort(sortFunc);
或者你可以使用 lodash orderBy
https://lodash.com/docs/4.17.11#orderBy
这是可用的 OrderBy 管道库。
https://github.com/VadimDez/ngx-order-pipe
npm install ngx-order-pipe --save
在视图中显示之前,您应该使用管道对数据进行排序:
<tr *ngFor="let ticket of array|sort-pipe">
<td>{{ticket.name}}</td>
<td>{{ticket.btn}}</td>
<td>{{ticket.index}}</td>
<tr>
在排序管道中,你可以使用:
array.sort(function(obj1, obj2) {
return obj1.idx > obj2.idx;
});
我需要在 table 排序数据中显示
js
let array = [
{idx: number, name: string, btn: number, index: number},
{idx: number, name: string, btn: number, index: number},
{idx: number, name: string, btn: number, index: number}
]
html
<tr *ngFor="let ticket of array">
<td>{{ticket.name}}</td>
<td>{{ticket.btn}}</td>
<td>{{ticket.index}}</td>
<tr>
我需要按索引值排序显示
let array = [
{ idx: 1, name: 'a', btn: 1, index: 2 },
{ idx: 2, name: 'b', btn: 2, index: 3 },
{ idx: 3, name: 'c', btn: 3, index: 1 }
];
// descending
let newarr = array.sort((a, b) => b.index - a.index);
//ascending
let newarr = array.sort((a, b) => a.index - b.index);
console.log(newarr);
您可以只使用排序数组:
function sortFunc(a, b) {
if ( a.index < b.index ){
return -1;
}
if ( a.index > b.index ){
return 1;
}
return 0;
}
let array = [
{idx: number, name: string, btn: number, index: number},
{idx: number, name: string, btn: number, index: number},
{idx: number, name: string, btn: number, index: number}
].sort(sortFunc);
或者你可以使用 lodash orderBy
https://lodash.com/docs/4.17.11#orderBy
这是可用的 OrderBy 管道库。
https://github.com/VadimDez/ngx-order-pipe
npm install ngx-order-pipe --save
在视图中显示之前,您应该使用管道对数据进行排序:
<tr *ngFor="let ticket of array|sort-pipe">
<td>{{ticket.name}}</td>
<td>{{ticket.btn}}</td>
<td>{{ticket.index}}</td>
<tr>
在排序管道中,你可以使用:
array.sort(function(obj1, obj2) {
return obj1.idx > obj2.idx;
});