Angular 4 - Sort Column Table

Question

I have based on this example to sort the columns of a table: Sort Table Colums

This is the code pipe:

import {Pipe, PipeTransform} from 'angular2/core';

@Pipe({  name: 'orderBy' })
export class OrderrByPipe implements PipeTransform {

  transform(records: Array<any>, args?: any): any {

    return records.sort(function(a, b){
          if(a[args.property] < b[args.property]){
            return -1 * args.direction;
          }
          else if( a[args.property] > b[args.property]){
            return 1 * args.direction;
          }
          else{
            return 0;
          }
        });
    };
}

This is the html code:

<tr *ngFor="let particular of particulars | orderBy: {property: column, direction: direction} | slice:1; let i = index">

The import in the component:

import { OrderrByPipe } from '../pipes/orderby.pipe';

I want to migrate the pipe class to Angular 4, How could do it?

This is the error in console:

error_handler.js:60 Error: Uncaught (in promise): Error: Error in ./ParticularsListComponent class ParticularsListComponent - inline template:42:14 caused by: Cannot read property 'sort' of undefined
Error: Error in ./ParticularsListComponent class ParticularsListComponent - inline template:42:14 caused by: Cannot read property 'sort' of undefined

Your problem is that particulars is null (well undefined exactly). Could you check it please ? — user4676340
– user4676340, Commented Sep 7, 2017 at 6:59
With only that code I can't help you. What are the values of direction and column ? — user4676340
– user4676340, Commented Sep 7, 2017 at 7:59
I just solved it, the parameter of the function was not fine, I have inserted a capital letter and it has to be the same as the object, everything ok — Eladerezador
– Eladerezador, Commented Sep 7, 2017 at 8:27
Nice, I'm making a comment so that you can mark your answer as resolved — user4676340
– user4676340, Commented Sep 7, 2017 at 8:31

user4676340 · Accepted Answer · 2017-09-07 08:32:10Z

2

Your problem comes from the particulars variable that is undefined.

answered Sep 7, 2017 at 8:32

user4676340

Sign up to request clarification or add additional context in comments.

Comments

nircraft · Accepted Answer · 2019-02-22 17:57:05Z

0

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

@Pipe({
  name: 'orderby'
})
export class OrderbyPipe implements PipeTransform {


  //private records : Array<any> = [];

    transform(records :Array<Object>, args?: any): any {
    if(records != null){
      return records.sort(function(a, b){
            if (a[args.property] === '' || a[args.property] === null || typeof a[args.property] === 'undefined') {
            return 1 * args.direction;
            }
            if (b[args.property] === '' || b[args.property] === null || typeof b[args.property] === 'undefined') {
            return -1 * args.direction;
            }
          if(a[args.property] < b[args.property]){
            return -1 * args.direction;
          }
          else if( a[args.property] > b[args.property]){
            return 1 * args.direction;
          }
          else{
            return 0;
          }
        });
    }
    };

}

edited Feb 22, 2019 at 17:57

nircraft

8,5085 gold badges33 silver badges46 bronze badges

answered May 7, 2018 at 5:07

chaithu kumar

1

1 Comment

chaithu kumar Over a year ago

Please check this, it worked for me, but i see one thing in that, integer sorting suppose if we take 1,2,3,4,5,6,7,8,9,10,11,12,13. it is behaving wierdly.

Collectives™ on Stack Overflow

Angular 4 - Sort Column Table

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related