Question

我试图以两种不同的方式过滤我的mat-table，按名称，使用filterPredicate，它工作正常，并按状态过滤，我使用filteredData：

displayedColumns = ['type', 'name'];
dataSource = new MatTableDataSource(ELEMENT_DATA);
this.dataSource.filterPredicate =
    (data: Element, filter: string) => (data.name.indexOf(filter) != -1);


applyFilterByName(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    this.dataSource.filter = filterValue;
}
    }

applyFilterByType(filterValue: number) {
    this.dataSource.filteredData =
        this.dataSource.filteredData.filter(data =>
            data.type. !== filterValue))
}

const ELEMENT_DATA: Element[] = [
    { type: 2, name: 'Hydrogen' },
    { type: 2, name: 'Helium' },
    { type: 3, name: 'Lithium' },
    { type: 2, name: 'Beryllium' },
    { type: 5, name: 'Boron' }
];

我的问题是applyFilterByType，我可以在控制台中看到，“this.dataSource.filteredData”作为正确的值，但我的表没有重新加载，我怎么强制重新加载这些数据？

Answer 1

尝试按$符号组合过滤器：

private nameFilterValue: string;
private typeFilterValue: string;

applyFilterByName(filterValue: string) {
  this.nameFilterValue = filterValue.trim().toLowerCase();
  this.dataSource.filter = !!this.typeFilterValue ? `${this.typeFilterValue}$${this.nameFilterValue}` : this.nameFilterValue;
}

applyFilterByType(filterValue: number) {
  this.typeFilterValue = filterValue.toString().toLowerCase();
  this.dataSource.filter = !!this.nameFilterValue ? `${this.typeFilterValue}$${this.nameFilterValue}` : this.typeFilterValue;
}

自定义过滤器后重新加载mat-table

1 个答案: