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)

  }

  }