Question

我无法对数据进行排序。我是从这个网站上提到的 -

我的数据没有按降序排序 -

代码 -

transaction.component.ts 文件 - ＆gt;

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'orderBy' })

export class TransactionComponent implements OnInit,PipeTransform {

 isDesc: boolean = false;
 direction;
 column;

 sort(property){
 this.direction = this.isDesc ? 1 : -1;
 this.isDesc = !this.isDesc; //change the direction    
 this.column = property;

  };

 transform(records: Array<any>, args?: any): any {
   return records.sort(function(a, b){
    if(a[args.property] < b[args.property]){
      console.log("clicked on first")
        return -1 *args.direction;
    }
    else if( a[args.property] > b[args.property]){
      console.log("clicked on second")
        return 1 *args.direction;
    }
    else{
      console.log("clicked on third")
        return 0;
    }
  });
  };
  }

transaction.component.html - ＆gt;

<tr *ngfor="let dat of result | filter:filterdata| orderBy : 
{property: 'LOG_ID',direction:direction } | paginate: { itemsPerPage: 
5, currentPage: p };let i = index ">

Answer 1

以下是排序管道的代码。它处理所有类型的数组string，number和array of objects。对于对象数组，您需要根据要对其进行排序来传递密钥。

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "sortBy"
})
export class SortByPipe implements PipeTransform {
  public transform(array: any[], reverse: boolean = false, prop?: string) {
    array=JSON.parse(JSON.stringify(array));
    if (!Array.isArray(array)) {
      return array;
    }
    if (array.length) {
      let sortedArray: any[];
      if (typeof array[0] === "string") {
        sortedArray = array.sort();
      }
      if (typeof array[0] === "number") {
        sortedArray = array.sort((a, b) => a - b);
      }
      if (typeof array[0] === "object" && prop) {
        sortedArray = array.sort((a, b) => a[prop].toString().localeCompare(b[prop].toString()));
      }
      if (reverse) {
        return sortedArray.reverse();
      } else {
        return sortedArray;
      }
    }
    return array;
  }
}

导入它并在AppModule中添加声明。以下是如何使用。

<span>{{['asd', 'def', 'bghi', 'nhm'] | sortBy: reverse}}</span>
<br>
<span>{{[2, 8, 3, 6, 34, 12] | sortBy: reverse}}</span>
<br>
<span>{{[{name:'name2'} , {name:'name1'} , {name:'name3'}] | sortBy: reverse : 'name' | json}}</span>

Here is a demo on Stackblitz

使用此方法，您可以传递一个布尔值，该值决定了相反的顺序。您也可以切换，只需单击按钮即可更改订单。

希望这会有所帮助：）

无法使用angular4中的PipeTransform进行反向排序

1 个答案: