https://angular2-tree.readme.io/docs
这棵树是通过角树节点构造的。
正在使用的自定义模板。不是自定义模板时可以使用过滤,但使用过滤器时不过滤。
指南有过滤功能,我的树没有过滤。
<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-template 中的节点。添加节点,如下所示。
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;
}