具有嵌套对象的 Angular Material 2 DataSource 过滤器

Question

我有带 Material 2 的 Angular 4 项目，我想过滤 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 对象中的 type 字段工作不正常。

Answer 1

这是一个包含递归的解决方案，因此您不必对每个嵌套对象或其键/值对进行硬编码。

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 覆盖。