Question

我正在使用Angular Material Data Table，并且正在尝试对所有值进行过滤。我要注意的是，在使用MatTableDataSource时，过滤器仅搜索传递的顶级实体，如果该实体附加了相关记录，它将不会搜索。

是否可以控制过滤器搜索的深度并使其能够搜索附加的相关实体？

编辑由原理图生成的1个示例代码：

@ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  @Input() dataSource: MatTableDataSource<TestEntity>;

  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
  displayedColumns = ['id', 'name', 'view_related_child'];

  ngOnInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

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

编辑2个实体：

export class TestEntity {
    id: string;
    name: string;
    childEntity: ChildEntity;
}

export class ChildEntity {
    childId: string;
    childName: string;
    childDate: string;
}

Answer 1

您可以将您的应用过滤器方法更改为此：

applyFilter(filterValue: string) {
    console.log(filterValue)

    this.dataSource.filterPredicate = (data: TestEntity, filter: string) =>   data.childEntity.childName.indexOf(filter) != -1 
    filterValue = filterValue.trim(); 
    this.dataSource.filter = filterValue 
  }

根据childEntity的childName过滤数据， working demo

物料数据表过滤控件

1 个答案: