Angular 表搜索过滤器

Question

我有一个需要过滤的表，但有些值是表中的 null 值，所以我不能在返回时使用 tolowercase()

错误：无法读取 null 的 tolowercase() 属性

无论 null 值如何，我都需要过滤表中的选定行。

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

注意：我使用的是 FilterPredicate

我尝试使用过滤谓词过滤表

过滤谓词

 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。

实际结果：由于 null 值，我得到“无法读取属性 toLowerCase() of null”

Answer 1

您可以在表上使用搜索 pipe：

堆栈闪电战

搜索管道：

@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

如果字段的值为 null，则可以使用默认的空字符串。

 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)

  }

  }