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

问题描述

我正在使用垫树角材料组件. 这是一个不错的组件，具有一些非常有用的功能，例如多选，全部展开/全部折叠. 我无法在其任何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事件.然后，通过TreeChecklistExample中的已处理事件更改了datasource.data.因此，数据源已被修改.

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屋！