Having trouble organizing the columns of my table using Angular 2
The transform code for the pipe is as follows:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'orderBy' })
export class OrderByPipe 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;
}
});
};
}
I've created a sorting function in my component.ts file like this:
sort(property){
this.isDesc = !this.isDesc; //change the direction
this.column = property;
this.direction = this.isDesc ? 1 : -1;
//this.sort(this.column);
};
This is how the HTML structure looks like:
<th class="cell-width-header title" (click)="sort(sellerNo)">
Seller No
<i class="fa" [ngClass]="{'fa-sort': column != 'sellerNo', 'fa-sort-asc': (column == 'sellerNo' && isDesc), 'fa-sort-desc': (column == 'sellerNo' && !isDesc) }" aria-hidden="true"> </i>
</th>
<tr *ngFor="let x of selectedData | orderBy: {property: column, direction: direction}">
<td>{{x.sellerNo}}</td>
However, upon loading the page, I encounter the following error:
zone.js:522 Unhandled Promise rejection: Error in ./FundingRequestComponent class FundingRequestComponent - inline template:208:14 caused by: Cannot read property 'sort' of undefined ; Zone: angular ; Task: Promise.then ; Value: ViewWrappedError {__zone_symbol__error: Error: Error in ./FundingRequestComponent class FundingRequestComponent - inline template:208:14 cau……} Error: Error in ./FundingRequestComponent class FundingRequestComponent - inline template:208:14 caused by: Cannot read property 'sort' of undefined at ViewWrappedError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:6688:33) at ViewWrappedError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:94913:16) at ViewWrappedError.WrappedError [as constructor] (http://localhost:4200/vendor.bundle.js:94978:16) at new ViewWrappedError (http://localhost:4200/vendor.bundle.js:96282:16)