Фильтр поиска угловых таблиц

Question

У меня есть таблица, которую нужно отфильтровать, но некоторые значения являются нулевыми значениями в таблице, поэтому я не могу использовать tolowercase (), так как она возвращает

Ошибка: не удается прочитать свойство tolowercase () из null

Мне нужно отфильтровать выбранные строки в таблице независимо от нулевых значений.

Кроме того, поиск должен возвращать строку, даже если одно значение в строке равно нулю

Примечание: я использую FilterPredicate

Я пытался использовать Filter Predicate для фильтрации таблиц

Filter Predicate

 this.dataSourceProject.filterPredicate =function (p, filter: any) {

   if (filter.filterSelect == true) {

    return p.signingName.toLowerCase().includes(filter.values) || 

     p.serviceName.toLowerCase().includes(filter.values) || 

     p.branchName.toLowerCase().includes(filter.values)

  }

  }

Apply Filter

applyFilter(filterVal: string) {

    filterVal = filterVal.trim().toLowerCase(); 

    let filterValue: any = {
        values: filterVal,

        filterSelect:true
      }


      this.dataSourceProject.filter = filterValue;
    }

HTML CODE

 <mat-form-field>     

        <input matInput (keyup)="applyFilter($event.target.value)" 
        placeholder="Search" autocomplete="off">

 </mat-form-field>

Ожидаемый результат: отфильтровать signatureName, serviceName, branchName.

Фактический результат: из-за нулевых значений я получаю «Не удается прочитать свойство toLowerCase () of null«

Answer 1

Вы можете использовать поисковую трубу в таблице:

Stackblitz

SearchPipe:

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {

  transform(value: any, keys: string, term: string) {
    if (!term) {
      return value;
    }
    return (value || []).filter((item) => keys.split(',').some(key => item.hasOwnProperty(key) && new RegExp(term, 'gi').test(item[key])));
  }

}

Answer 2

Пустая строка по умолчанию может использоваться, если значение поля равно нулю.

 this.dataSourceProject.filterPredicate =function (p, filter: any) {

   if (filter.filterSelect == true) {

    return (p.signingName || "").toLowerCase().includes(filter.values) || 

     (p.serviceName || "").toLowerCase().includes(filter.values) || 

     (p.branchName || "").toLowerCase().includes(filter.values)

  }

  }