如何使用 ngFor 按屬性使用 object 對數組進行排序

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

創建自定義 Angular pipe：

假設：假設您有一個對象數組，其中包含一個名為“order”的字段：

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

首先：在終端中生成一個 pipe：

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>

Answer 2

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 3

您可以只使用排序數組：

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

Answer 4

這是可用的OrderBy管道庫。
https://github.com/VadimDez/ngx-order-pipe

 npm install ngx-order-pipe --save

Answer 5

您應該使用管道在顯示視圖之前對數據進行排序：

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