在 Angular 中重置 this.dataSource.filterPredicate

Question

我在 mat-table 上使用过滤器和 select，为了使用 select 进行过滤，我在相关字段上使用过滤谓词。

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

这只是一个非常丑陋的补丁，但我遇到了同样的问题并通过查找 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;
}

Answer 2

声明一个组件级变量defaultFilterPredicate并将其设置为ngOnInit

defaultFilterPredicate?: (data: any, filter: string) => boolean;

ngOnInit() {
  this.defaultFilterPredicate = this.dataSource.filterPredicate;
}

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

this.dataSource.filterPredicate = this.defaultFilterPredicate;

在 Angular 中重置 this.dataSource.filterPredicate

Reset this.dataSource.filterPredicate in Angular

angular-material

angular

angular-material-table