angular - 有没有办法清除 ngx-treeview 组件的过滤器？

Question

我有一个包含多个字段的表单，其中位置是带有过滤器的树视图。每当我重置表单时，输入的过滤器值都不会被清除。我没有从发布者文档中找到任何解决方案。

有人有解决方案吗？

Answer 1

1. 将这些项目从 ngx-treeview 库导入到组件中：

   import { TreeviewComponent, TreeviewConfig, TreeviewItem } from 'ngx-treeview';

2. 将此全局变量添加到组件的 Typescript 代码中

@ViewChild(TreeviewComponent, { static: false }) treeviewComponent: TreeviewComponent;

3. 在 Html 中，对于 ngx-treeview HTML Tag，绑定 treeviewComponent 变量，声明如下：

<ngx-treeview #treeviewComponent [config]="config" [items]="treeviewItems" (selectedChange)="onSelectedChange($event)">

4. 创建一个按钮以清除过滤器并将其绑定到单击事件方法。在该单击事件方法中，添加这些代码行（这是用于 3 级树视图项列表，根据您的代码进行更改）：

this.treeviewItems.forEach(level1 => { //level 1
      level1.checked = false; //unchecks checkboxes
      level1.children.forEach(level2 => { //level 2
        level2.checked = false; //unchecks children checkboxes
        level2.children.forEach(level3 => { //level 3
          level3.checked = false;
        });
      });
    });
    this.treeviewComponent.onFilterTextChange('')
    this.treeviewComponent.filterText = '';
    this.treeviewItems = [...this.treeviewItems];

单击清除按钮时，它应该清除过滤器输入字段以及所有选中的复选框。