角度表搜索过滤器答案

【问题标题】：Angular table search filter角度表搜索过滤器
【发布时间】：2019-09-20 09:06:10
【问题描述】：

我有一个需要过滤的表，但是表中的某些值是空值，所以我不能使用 tolowercase() 因为它返回

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

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

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

注意：我使用的是 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。

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

【问题讨论】：

尝试 (p.signingName||'').toLowerCase();无论是小写字母，都添加空检查
它工作正常。非常感谢，伙计。

标签： angular typescript search angular-material

【解决方案1】：

您可以在表格上使用搜索管道：

Stackblitz

搜索管道：

@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])));
  }

}

【讨论】：

【解决方案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)

  }

  }

【讨论】：