我对 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);
}
感谢您的帮助
最佳答案
有两种方法
使管道不纯净
@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 在下一次更改检测运行时再次执行管道。
关于angular - 如何强制在 angular2 中执行自定义过滤管道,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40033084/