Невозможно выполнить обратную сортировку, используя PipeTransform в angular4

Question

Я не могу отсортировать данные. Я ссылался с этого сайта -

http://www.advancesharp.com/blog/1211/angular-2-search-and-sort-with-ngfor-repeater-with-example

Мои данные не сортируются в порядке убывания -

Код -

action.component.ts file ->

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

Transactions.component.html ->

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

Вот демонстрация по Stackblitz

С этим вы можете передать логическое значение, определяющее обратный порядок или нет.Также вы можете переключить это. Просто нажмите на кнопку, чтобы изменить порядок.

Надеюсь, это поможет:)