如何按属性使用对象对数组进行排序 ngFor

Question

我需要在表格中显示排序数据

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>

我需要按索引值排序显示

Answer 1

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);

Answer 2

创建自定义角度管道：

假设：假设您有一个对象数组，其中包含一个名为“order”的字段：

let items = [
   {name: 'item1', order: 2},
   {name: 'item2', order: 1}
];

首先：在终端中生成管道：

ng g p sortByOrder

二：修改生成的代码：

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'sortByOrder'
})
export class SortByOrderPipe implements PipeTransform {

  transform(value: any[]): any[] {
    return value.sort((n1,n2) => 
    {
      return n1.order - n2.order; 
    });
  }
}

第三：在html中使用：

<div *ngFor="let item of items | sortByOrder" >
</div>