Angular 5 Filter custom Filter Predicate

1
votes

I'm trying to filter records by multiple columns, getting some errors while type something inside filter input box.

Getting below error when type something in InputBox.

ERROR TypeError: Cannot read property 'toString' of undefined at MatTableDataSource.myFilterPredicate [as filterPredicate] (numbers.component.ts:191) at eval (table.es5.js:551) at Array.filter () at MatTableDataSource._filterData (table.es5.js:551) at MapSubscriber.eval [as project] (table.es5.js:512) at MapSubscriber._next (map.js:79) at MapSubscriber.Subscriber.next (Subscriber.js:95) at CombineLatestSubscriber.notifyNext (combineLatest.js:133) at InnerSubscriber._next (InnerSubscriber.js:25) at InnerSubscriber.Subscriber.next (Subscriber.js:95)

2
angularangular-filters
Can you provide the respective code of numbers.component.ts - seems like a reference issue since it's 'undefined'.. - iLuvLogix
@iLuvLogix , thanks for quick replay , please have a look into respective code - Amit Golhar

2 Answers

2
votes

I encountered the same problem. Cannot read property 'toString' of undefined at MatTableDataSource.myFilterPredicate [as filterPredicate] This means you might have another column in your mat table that is completely empty and that's why it can't read empty string. Solution: try to add some values in the empty column or define a condition that says; if column is empty then don't treat it as null (treat it like an " " string).

2
votes

The problem lies here:

 data.NUMBERRANGEEND.toString().trim().toLowerCase().indexOf(searchString.NUMBERRANGEEND.toLowerCase()) !== -1

toString() expects an argument in front - so you need to debug your data.NUMBERRANGEEND since it seems it's not containing any integer to be converted.

To determine where things went wrong you could debug the object-properties in the backend when they get processed/before they get sent to/requested from the frontend..