空值打破 Mat Table 中的自定义过滤器答案

【问题标题】：Null value breaking the custom filters in Mat Table空值打破 Mat Table 中的自定义过滤器
【发布时间】：2020-04-15 04:16:02
【问题描述】：

我正在向 Mat-Table 添加多个自定义过滤器。

问题是当数据具有null 值时，整个过滤器功能都会中断。

我的模拟样例

{
  name: null,
  id: 1,
  colour: 'Green',
  pet: 'Dog'
},

在customFilter() 函数中，我正在过滤如下数据，

 data.name.toLowerCase().indexOf(searchTerms.name) !== -1

我尝试像这样添加data?.name，但没有运气。

链接到我的 Stackblitz https://stackblitz.com/edit/material-column-filter-ov6ut6?file=src/app/app.component.ts

请帮忙。

【问题讨论】：

标签： javascript angular typescript angular-material

【解决方案1】：

更优雅的条件：

(data.name || '').toLowerCase().includes(searchTerm.name.toLowerCase())

【讨论】：

【解决方案2】：

试试这个：

let names = [
    {
  "name": null,
  "id": 1,
  "colour": "Green",
  "pet": "Dog"
},
       {
  "name": "Hello",
  "id": 2,
  "colour": "Green",
  "pet": "Dog"
},
        {
  "name": "Not null",
  "id": 3,
  "colour": "Green",
  "pet": "Dog"
}
];

let filterArray = names.filter((name1) => {return name1.name && name1.name.toLowerCase().indexOf('ello') > -1});
console.log(filterArray);

您必须在过滤条件中添加空检查和检查索引。

【讨论】：