具有嵌套对象的Angular Material 2 DataSource滤镜
具有嵌套对象的Angular Material 2 DataSource滤镜
提问于 2018-04-14 23:53:02
我有角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对象中的类型字段不能正常工作。
回答 3
Stack Overflow用户
回答已采纳
发布于 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;
};Stack Overflow用户
发布于 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覆盖。
Stack Overflow用户
发布于 2019-09-02 00:42:29
这是一个非常通用的解决方案，肯定会起作用。它不依赖于json的结构，无论它是简单的还是嵌套的，这个解决方案都适用于所有人。
this.dataSource.filterPredicate = (data: any, filter) => { const dataStr =JSON.stringify(data).toLowerCase(); return dataStr.indexOf(filter) != -1; }
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49833315
复制相关文章
相似问题
腾讯云开发者
