在Angular中重置this.dataSource.filterPredicate

Question

我在mat-table上使用了一个筛选器和一个select，为了使用select进行筛选，我在相关字段上使用了filtered谓词。

public applyFilter(filterValue: string) {
this.dataSource.filterPredicate = (data: SP, filter: string) => {
return data.tag === filter;
};
this.dataSource.filter = filterValue;
}

但我也有一个像这样的标准过滤器，用于使用输入字段进行过滤：-

public filter(filterValue: string): void {
filterValue = filterValue.trim();
filterValue = filterValue.toLowerCase();
this.dataSource.filter = filterValue;
}

如何重置原始filterPredicate以使第二个过滤器开始工作？

Answer 1

声明组件级变量defaultFilterPredicate并将其设置在ngOnInit上

defaultFilterPredicate?: (data: any, filter: string) => boolean;
ngOnInit() {
this.defaultFilterPredicate = this.dataSource.filterPredicate;
}

然后，当你需要重置时，只需将其设置回第一次加载组件时的状态，即默认值。

this.dataSource.filterPredicate = this.defaultFilterPredicate;

Answer 2

这只是一个非常丑陋的补丁，但我也遇到了同样的问题，并通过查找material-table.umd.js中原始过滤器的工作方式并复制它来解决它。我知道一定有更好的方法，我也希望将filterPredicate设置为null应该有效，但事实并非如此。也许不是最好的答案，但这对我来说很有效：

public filter(filterValue: string) : void {
this.dataSource.filterPredicate = 
function (data, filter) {
var dataStr = Object.keys(data).reduce(function (currentTerm, key) {
return currentTerm + data[key] + '◬';
}, '').toLowerCase();
var transformedFilter = filter.trim().toLowerCase();
return dataStr.indexOf(transformedFilter) != -1;
};
filterValue = filterValue.trim(); 
filterValue = filterValue.toLowerCase(); 
this.dataSource.filter = filterValue;
}