如何在angular2中强制执行自定义过滤器管道

Question

我对 angular2 中的自定义过滤有疑问。

这是我的场景：

我的页面包含几个自定义组件。其中一个负责在页面左侧显示数据：(componentA)

  <md-list-item *ngFor="let item of items | filter :  filter | sort:   sort; let i = index"  " >
       <template [render]="itemTemplateRef" [context.item]="item" 
       [context.index]="index"></template>
   </md-list-item>

而且，过滤器是通过自定义过滤器完成的：

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



@Pipe({ name: 'filter' })

export class FilterPipe implements PipeTransform {
    transform(values: any[], filter: any): any {
        if (typeof filter !== "function") return values;
          return values.filter((elem) => {
             return filter(elem);
        });
    }
}

在主页中，我将一个函数作为输入属性发送到组件 A：

   public filter = (element: MyBean) => {
             return (element.email !== undefined);

    }

在加载页面时，它的执行没有任何问题。但我想通过单击复选框多次更改过滤条件。 我知道这个事实，如果输入值发生变化，则会执行纯过滤。 但是我不知道，我的场景中的哪个输入值应该更改为强制过滤？

当我在复选框的 Onchange 事件中添加以下功能时，没有任何内容被过滤。（项目绑定到我的组件显示数据中）

    createFilterCondition = (searchCondition: string) => {

        items.filter((element) => {
            return this.doFilter(elem);
        });
    }
   public doFilter= (element: MessagesBean) => {

        return (element.email !== undefined);
    }

感谢您的帮助

Answer 1

有两种方法

使管道不纯

@Pipe({ name: 'filter', pure: false })

缺点是管道会被非常频繁地执行（每次运行变化检测）。您可以通过缓存结果进行优化，并且仅在其中一个参数发生更改时进行过滤，但检查数组是否被修改也不太便宜。

另一种方法是将额外的参数传递给管道。如果管道的值或参数发生变化，Angular 会再次执行管道

@Pipe({ name: 'filter' })

export class FilterPipe implements PipeTransform {
    transform(values: any[], filter: any, changeIndicator: number): any {
        if (typeof filter !== "function") return values;
          return values.filter((elem) => {
             return filter(elem);
        });
    }
}

您只需在组件中增加 changeIndicator 即可让 Angular 在下一次更改检测运行时再次执行管道。

Answer 2

感谢您的回复。 它通过创建一个新数组来解决。如果这不是过滤的好方法，请告诉我。

下面我描述了我做了什么：

我通过创建另一个数组而不是原始数组来处理它。（命名为过滤数组）

并保留过滤器的结果，因此，将 filterArray 绑定到我的组件中。我意识到数组上的过滤器方法返回一个新数组。所以将结果放入新变量中：

 this.filteredArray = this.records.filter((element) => {
            return this.filterSms(element);
        }); 

public filterSms = (element: MessagesBean) => {
          return (element.mobile !== undefined);
}