angular - 如何强制在 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 事件中添加以下函数时，不会过滤任何内容。(项目绑定(bind)到我的组件显示的数据中)

    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 在下一次更改检测运行时再次执行管道。