Angular, TypeError: Cannot read property 'sort' of undefined

Question

i'm trying to make a sorting function and pipe for a table by following this link and here is the plunker of that example. From the example that i'm following the table header should be clickable and do the sort() function. My pipe name is prdSort. I'm also using ngx-pagination but i don't think that the main cause of this error.

//part of service.ts
productList: AngularFireList < any > ;
//end

//component.ts
productList: Product[];

isDesc: boolean = false;
column: string = 'prdName';
records = this.productList
sort(property) {
  this.isDesc = !this.isDesc; //change the direction    
  this.column = property;
  let direction = this.isDesc ? 1 : -1;
};

<!-- table header -->
<th (click)="sort('prdName')">Name</th>

<!--table row-->
<tr *ngFor="let product of productList | paginate: { itemsPerPage: 3, currentPage: p } | prdSort: {property: column, direction: direction} ">

//pipe.ts

transform(records: any, args ? : any): any {

  return records.sort(function(a, b) {
    if (records !== undefined) {
      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;
      }
    }
    return records;
  });
};

I alse already included the pipe file to app.module.ts. Please let me know if more snippets are needed.

Answer 1

Try to initialize your productList with an empty array:

// component.ts:

productList: Product[] = [];

For more security, to prevent calling array.prototype.sort on a variable that is undefined instead of an array, you can add the code below in your filter:

transform(records: any, args ? : any): any {
    records = records || [];  // set records to an empty array if undefined
    return records.sort(function(a, b) { ... });
}

Answer 2

As @Faly answered this almost perfectly, but your pipe use is invalid in my guess.

From this

<tr *ngFor="let product of productList | paginate: { itemsPerPage: 3, currentPage: p } | prdSort: {property: column, direction: direction} ">

Change to this

<tr *ngFor="let product of productList | paginate: { itemsPerPage: 3, currentPage: p } | prdSort: column : direction ">

(Pass arguments changed.)

Also from @Faly

transform(records: any, args ? : any): any {
    records = records || [];  // set records to an empty array if undefined
    return records.sort(function(a, b) { ... });
}

Explaination: When you look at your error ERROR TypeError: Cannot read property 'sort' of undefined at PrdSortPipe.transform you are trying to use sort function on undefined due to in my guess badly passed args to pipe. So your pipe gets undefined value on which can't be executed sort method. Look at this answer about multiple args in pipe.