Блог

https://angular2-tree.readme.io/docs

Дерево было построено с помощью узла дерева angular.

Используется пользовательский шаблон. Вы можете использовать фильтрацию, если она не является пользовательским шаблоном, но она не фильтруется при использовании фильтра.

В руководстве есть функции фильтрации, и мое дерево не фильтруется.

 <input class="form-control f-12" id="filter2" #filter2 (keyup)="tree.treeModel.filterNodes(filter2.value)" placeholder="filter nodes"/>

<tree-root #tree [nodes]="nodes" [focused]="true">
                <ng-template #treeNodeTemplate let-node="node" let-index="index">
                  <input class="pt-1" (change)="clickCheckbox(node, $event)" type="checkbox" [indeterminate]="node.data.indeterminate" [checked]="node.data.checked">
                  <span class="pl-1" (click)="treeMembers(node.data)">{{node.data.name}}</span>
                </ng-template>
              </tree-root>
 

Поиск узлов в ng-шаблоне невозможен.
Добавьте узлы, как показано ниже.

 public nodes: any = [];
public chart;

constructor(
private _http: HttpClient
) {
this.addNodeData();
}

addNodeData(){
this._http.get("url").subscribe(res => {
      this.chart = res;
      let node = this.addNdoeGroup(this.chart[0]);
      this.nodes.push(node);
    });
}

addNdoeGroup(Chart: any) {
let node = { id: Chart.TeamID, name: Chart.TeamName, children: [], member: []};

for (let child in Chart.Children) {
  let nChild = this.addNdoeGroup(Chart.Children[child]);
  node.children.push(nChild);
}

for (let member in Chart.Members) {
  let nMembers = this.addNodeMember(Chart, Chart.Members[member]);
  node.children.push(nMembers);
}
return node;
}

addNodeMember(Chart, member) {
let node = { id: Chart.TeamID, name: member.UserName, children: [], member: []};
return node;
}