如何强制自定义过滤管道在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在下一次更改检测运行时再次执行管道.