我有角4项目与材料2,我想在MatTable中过滤数据。当我们在不嵌套的字段上过滤数据时,DataSource过滤器工作得很好。
this.dataSource = new MatTableDataSource([
{ orderNumber: 1, orderInfo: { type: 'ABC'}, date: '12/3/2012 9:42:39 AM'},
{ orderNumber: 3, orderInfo: { type: 'Hello' }, date: '12/2/2018 9:42:39 AM'},
]);
筛选器对orderNumber、date工作正常,但对orderInfo对象中的类型字段不能正常工作。
发布于 2018-04-15 00:09:21
DataSource具有需要在我们的应用程序中覆盖的filterPredicate()
方法,如下所示。在数据源初始化后,将此代码添加到组件中。
this.dataSource.filterPredicate = (data, filter: string) => {
const accumulator = (currentTerm, key) => {
return key === 'orderInfo' ? currentTerm + data.orderInfo.type : currentTerm + data[key];
};
const dataStr = Object.keys(data).reduce(accumulator, '').toLowerCase();
// Transform the filter by converting it to lowercase and removing whitespace.
const transformedFilter = filter.trim().toLowerCase();
return dataStr.indexOf(transformedFilter) !== -1;
};
发布于 2018-06-07 03:50:07
这里有一个合并了递归的解决方案,这样您就不必对每个嵌套对象或它们的键/值对进行硬编码。
this.dataSource.filterPredicate = (data, filter: string) => {
const accumulator = (currentTerm, key) => {
return this.nestedFilterCheck(currentTerm, data, key);
};
const dataStr = Object.keys(data).reduce(accumulator, '').toLowerCase();
// Transform the filter by converting it to lowercase and removing whitespace.
const transformedFilter = filter.trim().toLowerCase();
return dataStr.indexOf(transformedFilter) !== -1;
};
和nestedFilterCheck
nestedFilterCheck(search, data, key) {
if (typeof data[key] === 'object') {
for (const k in data[key]) {
if (data[key][k] !== null) {
search = this.nestedFilterCheck(search, data[key], k);
}
}
} else {
search += data[key];
}
return search;
}
多亏了@Sagar Kharche的filterPredicate
覆盖。
发布于 2019-09-02 00:42:29
这是一个非常通用的解决方案,肯定会起作用。它不依赖于json的结构,无论它是简单的还是嵌套的,这个解决方案都适用于所有人。
this.dataSource.filterPredicate = (data: any, filter) => { const dataStr =JSON.stringify(data).toLowerCase(); return dataStr.indexOf(filter) != -1; }
https://stackoverflow.com/questions/49833315
复制相似问题