如何修改数据 table 过滤器在 Angular Material 中的工作方式?
How to modify the way the data table filter works in Angular Material?
我正在尝试在 Angular Material 数据 Table 中使用过滤器,例如 -
如果我搜索“MATCHED”,那么“MATCHED”和“UNMATCHED[=29=” ]" 出现在数据 table 的状态列中。
我知道这是因为数据对象被缩减和连接并且应用了过滤器(from the Angular Material Docs).
我只想显示“MATCHED”状态,如果是搜索匹配的话。
所以我正在寻找一个可以进行精确单词过滤而不是子字符串的过滤器。
如何进行?
我读了这个 但我无法继续。
给你 - StackBlitz
根据您提到的答案,我们需要定义 filterPredicate :
export class TableFilteringExample {
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource(ELEMENT_DATA);
constructor() {
this.dataSource.filterPredicate = (data: PeriodicElement, filter: string) => {
return data.name === filter;
}
}
applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim();
}
}
请注意,toLowerCase()
已从 filterValue.trim()
中删除。
我正在尝试在 Angular Material 数据 Table 中使用过滤器,例如 -
如果我搜索“MATCHED”,那么“MATCHED”和“UNMATCHED[=29=” ]" 出现在数据 table 的状态列中。
我知道这是因为数据对象被缩减和连接并且应用了过滤器(from the Angular Material Docs).
我只想显示“MATCHED”状态,如果是搜索匹配的话。 所以我正在寻找一个可以进行精确单词过滤而不是子字符串的过滤器。 如何进行?
我读了这个
给你 - StackBlitz
根据您提到的答案,我们需要定义 filterPredicate :
export class TableFilteringExample {
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource(ELEMENT_DATA);
constructor() {
this.dataSource.filterPredicate = (data: PeriodicElement, filter: string) => {
return data.name === filter;
}
}
applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim();
}
}
请注意,toLowerCase()
已从 filterValue.trim()
中删除。