带嵌套对象的Angular Material 2数据源过滤器

我有angular 4项目和material 2，我想过滤MatTable中的数据。当我们在未嵌套的字段上过滤数据时，数据源过滤器工作正常

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对象中的type字段，筛选器工作不正常。

数据源具有需要在应用程序中重写的

filterPredicate（）

方法，如下所示。在数据源初始化后，在组件中添加此代码

this.dataSource.filterPredicate=（数据，过滤器：字符串）=>{
常量累加器=（当前术语，键）=>{
return key==“orderInfo”？currentTerm+data.orderInfo.type:currentTerm+data[key]；
};
const dataStr=Object.keys（data）.reduce（累加器“”）.toLowerCase（）；
//通过将筛选器转换为小写并删除空格来转换筛选器。
const transformedFilter=filter.trim（）.toLowerCase（）；
返回dataStr.indexOf（transformedFilter）！=-1；
};

这里有一个包含递归的解决方案，这样您就不必硬编码每个嵌套对象或它们的键/值对

this.dataSource.filterPredicate=（数据，过滤器：字符串）=>{
常量累加器=（当前术语，键）=>{
返回此.nestedFilterCheck（currentTerm、data、key）；
};
const dataStr=Object.keys（data）.reduce（累加器“”）.toLowerCase（）；
//通过将筛选器转换为小写并删除空格来转换筛选器。
const transformedFilter=filter.trim（）.toLowerCase（）；
返回dataStr.indexOf（transformedFilter）！=-1；
};

以及

nestedFilterCheck

nestedFilterCheck（搜索、数据、键）{
if（数据类型[键]=“对象”）{
for（数据[key]中的常数k）{
if（数据[键][k]！==null）{
search=this.nestedFilterCheck（搜索，数据[key]，k）；
}
}
}否则{
搜索+=数据[键]；
}
返回搜索；
}

---

感谢您提供的过滤器预测覆盖。

这是一个非常通用的解决方案，肯定会起作用。它不依赖于json的结构，无论是简单的还是嵌套的，这个解决方案适用于所有人

this.dataSource.filterPredicate=（数据：any，filter）=>{
const dataStr=JSON.stringify（data.toLowerCase（）；
返回dataStr.indexOf（filter）！=-1；
}

请发布过滤器逻辑。applyFilter（filterValue:string）{filterValue=filterValue.trim（）；filterValue=filterValue.toLowerCase（）；this.dataSource.filter=filterValue；}在之前添加它：-this.dataSource.paginator=this.paginator；this.dataSource.sort=this.sort；或者在this.dataSource初始化之后的ngOnInit（）方法中的任何地方。对于Angular 6是否还有更智能的方法？排序也不起作用，如果我们有多个列，那么将这个谓词添加x倍是非常难看的…@badera请查看我发布的答案，以获得您的解决方案problem@badera不幸的是，它今天仍然不起作用。非常荒谬的是，它仍然没有遍历内部嵌套对象。@badera用于过滤的方法只是使用接受的答案。但是，对于排序，可以使用物料表的sortDataAccessor，也就是说，只需在filterPredicate之后使用此代码。this.dataSource.sortingDataAccessor=（项，属性）=>{switch（属性）{case'columnHeaderName'：return item.orderInfo.type；//为其余列标题定义其他情况默认值：return”“；}；添加此filterPredicate时，我的标记应该是什么样子？我目前对事件进行筛选（根据材料文档），如下所示：@RinandLen您需要

，然后在您的代码中使用类似于

applyFilter（filterValue:string）{filterValue=filterValue.trim（）；//删除空白filterValue=filterValue.toLowerCase（）；//Datasource默认为小写匹配this.Datasource.filter=filterValue；}

非常智能的解决方案，但是这也会搜索属性名。简单而优雅！回答得好！这太棒了！但是，如何才能解决Jeffreyroosendal礼物的问题呢？（关于搜索属性名）。这应该是正确答案！如果您有多个数值或布尔值（仅包含字符串），则此操作不起作用。否则，请输入一个

true

，否则另一个字段中的精确数值将过滤该项，即使精确属性没有所需的值。