Значение NULL, нарушающее пользовательские фильтры в Mat Table

Question

Я добавляю несколько пользовательских фильтров в 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

Пожалуйста, помогите.

Answer 1

Более элегантное состояние:

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

Answer 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);

Вы должны добавить нулевую проверку и индекс проверки в состоянии фильтра.