angular 中的樹狀復選框和搜索過濾器實現？

Question

我有的：

我已經實現了一個帶有復選框選擇和搜索過濾器的樹狀結構。 層次結構是固定的 3 個級別（ Parent->Intermediate->Child ）。 選擇復選框工作得非常好（所有功能包括在選擇某些節點時不確定的簽名復選框或選中所有子節點時的勾號）。

我還使用自定義 angular pipe 對樹結構數據應用了搜索過濾器。

當我應用搜索過濾器時會出現問題，復選框的選擇行為不端。 它也沒有被選中。 不確定的標志也沒有按預期工作。

一個很好的參考是： https://angular2-tree.readme.io/docs/filtering ，雖然我不能使用這個庫，但我想有完全相同的功能。

我的要求是用戶應該能夠過濾節點和 select 節點

我嘗試了什么：

我創建了這個 Stackblitz 鏈接。 請看看這個。

任何幫助或建議將不勝感激。 謝謝！

Answer 1

為什么不使用墊子樹？ 基於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);
  }

我們可以添加一個輸入“搜索”並制作一個 function

 <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'">

請參閱此堆棧閃電戰