Question

我有一个管道过滤器，该过滤器接收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]);
       });
     });
  }
 }

Answer 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>

过滤管角度-多个参数

1 个答案: