过滤管角度 - 多个参数

【问题标题】：Filter pipe Angular - Multiple parameters过滤管角度 - 多个参数
【发布时间】：2018-12-02 10:28:27
【问题描述】：

我的管道过滤器接收在 html 中定义的对象，只是我必须定义它将过滤的属性。如何在不传递 html 参数的情况下生成我的过滤器？我希望您过滤所有列。

HTML----

<tr *ngFor="let view of list | filter : { id:searchText, name:searchText, 
   age:searchText }">

   <td>{{view.id}}</td>
   <td>{{view.name}}</td>
   <td>{{view.age}}</td>
</tr>



PIPE---

export class FilterPipe implements PipeTransform {
      transform(value: any, searchText: any): any {
      let filterKeys = Object.keys(searchText);

      return value.filter(item => {
        return filterKeys.some((keyName) => {
          return new RegExp(searchText[keyName], 'gi').test(item[keyName]);
       });
     });
  }
 }

【问题讨论】：

标签： angular filter pipe

【解决方案1】：

我做了这个例子，你不需要将对象属性传递给过滤器： https://stackblitz.com/edit/angular-zmzyy9

管道看起来像：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'filterAll' })
export class FilterPipe implements PipeTransform {
  transform(value: any, searchText: any): any {
    if(!searchText) {
      return value;
    }
    return value.filter((data) => this.matchValue(data,searchText)); 
  }

 matchValue(data, value) {
   return Object.keys(data).map((key) => {
       return new RegExp(value, 'gi').test(data[key]);
   }).some(result => result);
 }
}

并在 HTML 中使用：

<tr *ngFor="let view of list | filterAll: searchText">
    <td>{{view.id}}</td>
    <td>{{view.name}}</td>
    <td>{{view.age}}</td>
</tr>

【讨论】：