如何过滤 mat-tree 组件 Angular Material 6.0.1 [英] How to filter a mat-tree component Angular Material 6.0.1

问题描述

我正在使用 mat-tree 角度材料组件.这是一个很好的组件，具有一些非常有用的功能，例如多选、全部展开/全部折叠.我无法在他们的任何 API 中找到任何树过滤功能.有没有人遇到过这个功能或做过任何工作来获得 mat-tree 过滤器?

I'm using mat-tree angular material component. It's a nice component with some very useful features like, multi-select, expand all/collapse all. I was not able to find any tree filtering feature in any of their APIs. Has anyone came across this feature or done any work around to get mat-tree filter?

推荐答案

我通过创建一个新的数据源(已过滤)解决了这个问题.

I solved the problem by creating a new data source(filtered).

stackblitz 示例

我会解释共享链接的例子:我在ChecklistDatabase中用filter(filterText: string)过滤数据并触发了一个dataChange 事件.然后 datasource.data 被 TreeChecklistExample 中的处理事件改变了.这样数据源就被修改了.

I will explain the example of the shared link: I filtered the data with filter(filterText: string) in ChecklistDatabase and triggered a dataChange event. Then datasource.data was changed by a handled event in TreeChecklistExample. Thus the data source has been modified.

filter(filterText: string) {
  let filteredTreeData;

  if (filterText) {
    filteredTreeData = this.treeData.filter(
      //There is filter function in the sample
    );
  } else {
    filteredTreeData = this.treeData;
  }

  // file node as children.
  const data = this.buildFileTree(filteredTreeData, '0');

  // Notify the change. !!!IMPORTANT
  this.dataChange.next(data);
}

这篇关于如何过滤 mat-tree 组件 Angular Material 6.0.1的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！