javascript - 树状复选框和 Angular 搜索过滤器实现？

Question

我有什么:

我已经实现了一个带有复选框选择和搜索过滤器的树状结构。层次结构固定为 3 个级别(Parent->Intermediate->Child)。选择复选框工作得很好(所有功能包括选中某些节点时不确定的复选框签名或选中所有子节点时的勾号)。

我还使用自定义 Angular 管道对树结构数据应用了搜索过滤器。

问题发生在我应用搜索过滤器时，复选框的选择行为不正常。它也没有被选中。不确定的标志也没有按预期工作。

一个很好的引用是:https://angular2-tree.readme.io/docs/filtering ，虽然我不能使用这个库，但我想拥有完全相似的功能。

我的要求是用户应该能够过滤节点并选择节点

我尝试了什么:

我创建了这个 Stackblitz link .请看看这个。

如有任何帮助或建议，我们将不胜感激。谢谢!

Answer 1

为什么不使用 mat-tree？基于 this SO about tree-view

我们需要两个递归函数:

setChildOk(text: string, node: any) {
    node.forEach(x => {
      x.ok = x.name.indexOf(text) >= 0;
      if (x.parent) this.setParentOk(text, x.parent,x.ok);
      if (x.children) this.setChildOk(text, x.children);
    });
  }
  setParentOk(text, node,ok) {
    node.ok = node.ok || ok || node.name.indexOf(text)>=0;
    if (node.parent) this.setParentOk(text, node.parent,node.ok);
  }

我们可以添加一个输入“搜索”并创建一个函数

 <input matInput [ngModel]="search" 
       (ngModelChange)="search=$event;setChildOk($event,dataSource.data)">

好吧，现在，我们显示节点是 node.ok 或 if !search

<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle 
      [style.display]="!search || node.ok?'block':'none'">

和

<mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild" 
          [style.display]="!search || node.ok?'block':'none'">

参见 this stackblitz