Дерево как флажок и реализация фильтра поиска в angular?

Question

Что у меня есть:

Я реализовал древовидную структуру с выбором флажка и поисковым фильтром. Иерархия имеет фиксированные 3 уровня (Parent->Intermediate->Child). Выбор флажков работает отлично (со всеми функциями, включая флажок неопределенного знака при выборе некоторых узлов, или флажок, когда выбраны все дочерние элементы).

Я также применил фильтр поиска к данным с древовидной структурой с кастом angular труба.

Проблема возникает, когда я применяю поисковый фильтр, выбор флажков ведет себя неправильно. Также это не выбирается. Неопределенный знак также не работает, как ожидалось.

Очень хорошая справка: https://angular2-tree.readme.io/docs/filtering, хотя я не могу использовать эту библиотеку, но я хотел иметь точно такую ​​же функцию.

Мое требование состоит в том, чтобы пользователь мог фильтровать узлы и выбирать узел

Что я пробовал:

Я создал эту Stackblitz ссылку . Пожалуйста, посмотрите на это.

Любая помощь или предложение будет высоко ценится. Спасибо!

Answer 1

почему бы не использовать мат-дерево? основан на это SO о древовидном представлении

Нам нужны две рекурсивные функции:

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

См. В этот стекаблит