angular - 如何过滤垫树组件Angular Material 6.0.1

Question

我正在使用 mat-tree Angular Material 组件。这是一个不错的组件，具有一些非常有用的功能，例如多选、全部展开/全部折叠。我无法在他们的任何 API 中找到任何树过滤功能。有没有人遇到过这个功能或做了任何工作来获得 mat-tree 过滤器？

Answer 1

在我花了几天时间完成同一任务后，这里有一些我可以提供的提示:我正在使用输入事件来跟随用户输入:

<input matInput class="form-control" 
  (input)="filterChanged($event.target.value)" 
  placeholder="Search Skill">

在这个过滤器上，我附加了一个主题，这样我就可以订阅它了:

searchFilter: Subject<string> = new Subject<string>();
filterChanged(filter: string): void {
  this.searchFilter.next(filter);
}

为了让用户顺畅，通常，我们希望延迟搜索执行，您可以使用 debounceTime 来执行。

this.searchFilter.pipe(debounceTime(500), distinctUntilChanged())
  .subscribe(value => {
    if (value && value.length >= 3) {
      this.filterByName(value);
    } else {
      this.clearFilter();
    }
});

为了执行搜索，我使用 CSS 类隐藏和显示节点。这是直接在扁平且非常容易过滤的演示文稿集合上完成的。

treeControl: FlatTreeControl<SkillFlatNode>;
this.treeControl.dataNodes

首先，我隐藏所有内容，然后仅显示符合条件的内容。最后，我想显示他们的 parent ，但这是我的树结构特定。

private filterByName(term: string): void {
  const filteredItems = this.treeControl.dataNodes.filter(
    x => x.value.DisplayName.toLowerCase().indexOf(term.toLowerCase()) === -1
  );
  filteredItems.map(x => {
    x.visible = false;
  });

  const visibleItems = this.treeControl.dataNodes.filter(
    x => x.value.IsSkill &&
    x.value.DisplayName.toLowerCase().indexOf(term.toLowerCase()) > -1
  );
  visibleItems.map( x => {
    x.visible = true;
    this.markParent(x);
  });
}

最后，这里是清除过滤器:

private clearFilter(): void {
  this.treeControl.dataNodes.forEach(x => x.visible = true);
}

不要像我一样犯同样的错误并尝试过滤输入集合(在我的例子中是 this.dataSource.data)，因为你会失去你的选择或者你将不得不映射它回到演示文稿。这是我的初始数据:

this.treeFlattener = new MatTreeFlattener(
  this.transformer, this._getLevel, this._isExpandable, this._getChildren
);
this.treeControl = new FlatTreeControl<SkillFlatNode>(
  this._getLevel, this._isExpandable
);
this.dataSource = new MatTreeFlatDataSource(
  this.treeControl, this.treeFlattener
);

skillService.dataChange.subscribe(data => {
  this.dataSource.data = data;
});