Angular 5过滤器自定义过滤谓词答案

【问题标题】：Angular 5 Filter custom Filter PredicateAngular 5过滤器自定义过滤谓词
【发布时间】：2019-02-08 09:56:08
【问题描述】：

我正在尝试按多列过滤记录，在过滤器输入框中输入内容时出现一些错误。

在 InputBox 中输入内容时出现以下错误。

错误类型错误：无法读取未定义的属性“toString” 在 MatTableDataSource.myFilterPredicate [作为 filterPredicate] (numbers.component.ts:191) 在评估（table.es5.js:551）在 Array.filter() 在 MatTableDataSource._filterData (table.es5.js:551) 在 MapSubscriber.eval [作为项目] (table.es5.js:512) 在 MapSubscriber._next (map.js:79) 在 MapSubscriber.Subscriber.next (Subscriber.js:95) 在 CombineLatestSubscriber.notifyNext (combineLatest.js:133) 在 InnerSubscriber._next (InnerSubscriber.js:25) 在 InnerSubscriber.Subscriber.next (Subscriber.js:95)

【问题讨论】：

您能否提供 numbers.component.ts 的相应代码 - 似乎是一个参考问题，因为它是“未定义”..
@iLuvLogix，感谢快速回放，请查看相应代码

标签： angular angular-filters

【解决方案1】：

我遇到了同样的问题。 Cannot read property 'toString' of undefined at MatTableDataSource.myFilterPredicate [as filterPredicate] 这意味着您的 mat 表中可能有另一列完全为空，这就是它无法读取空字符串的原因。解决方案：尝试在空列中添加一些值或定义一个条件说；如果列为空，则不要将其视为 null（将其视为 " " 字符串）。

【讨论】：

【解决方案2】：

问题出在这里：

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

toString() 前面需要一个参数 - 因此您需要调试您的 data.NUMBERRANGEEND，因为它似乎不包含任何要转换的整数。

要确定哪里出了问题，您可以在后端处理对象属性时/在它们被发送到前端/从前端请求它们之前调试它们。

【讨论】：

您的错误是绝对正确的 - data.NUMBERRANGEEND 但此属性仅从后端获取字符串值
那么当你从后端收到对象属性时，为什么不调试它，或者在后端使用几个console.logs来处理它们以确定哪里出错了？