角表搜索过滤器

Question

我有一个需要过滤的表，但是某些值在表中为空值，因此在返回时我不能使用tolowercase（）

错误：无法读取属性null的lowercase（）

我需要过滤表中的选定行，而与空值无关。

此外，即使该行中的一个值为空，搜索也必须返回该行

注意：我正在使用FilterPredicate

我尝试使用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)

  }

  }

应用过滤器

applyFilter(filterVal: string) {

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

    let filterValue: any = {
        values: filterVal,

        filterSelect:true
      }


      this.dataSourceProject.filter = filterValue;
    }

HTML代码

 <mat-form-field>     

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

 </mat-form-field>

预期结果：要过滤signingName，serviceName，branchName。

实际结果：由于值为空，我得到“无法读取属性到LowerCase（）  为空”

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)

  }

  }