【问题标题】:How to filter the subnodes of a tree using recursion in angular2如何在angular2中使用递归过滤树的子节点
【发布时间】:2018-02-15 15:47:58
【问题描述】:
--**app.component.ts**
import { Component,OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';


@Component({
  selector: 'my-app',
  templateUrl:'./app.component.html'
})
export class AppComponent implements OnInit {
  Tree: any;
  private searchText$ = new Subject<string>();
  ngOnInit() {
    this.Tree = this.myTree;
  }

  myTree  = [
    { name: "parent1", subnodes: [{ name: "parent1_child1", subnodes: [{ name: "parent_child1_child1", subnodes: [] }] },{ name: 'parent1_child2', subnodes: [] }]  },
      {
          name: "secondparent2",
          subnodes: [
            { name: "secondparent2_child1", subnodes: [] }
          ]
      },
        {
          name: "thirdparent3",
          subnodes: [
              {
              name: "Chandigarh3",
                  subnodes: [
                    { name: "parent3_child1_child1", subnodes: [] }
                  ]
              }
          ]
      }
  ];

  filter(name: string):any {

    this.Tree = this.myTree.filter(data => data.name.match(name) || (data.subnodes.filter(subnode => (subnode.name.match(name))).length > 0) ? true:false);

  }

  search(input: string, data: any): boolean {
   let output= data.subnodes.filter(subdata => (subdata.name.match(name)))
   if (output != undefined && output.length > 0) {
     return true;
   }
   else {
     return false;
   }

    }

  }


--**app.component.html**
<h1>Tree as UL</h1>
<tree-view [treeData]="Tree"></tree-view>
<input   type="text"  (keyup)="filter($event.target.value)"  />

我可以过滤第一个父节点和相应的子节点,但之后如何过滤子节点? 我已经编写了搜索函数,所以我可以通过传递输入和树从过滤方法调用搜索方法,我想递归地使用搜索方法

【问题讨论】:

  • 我添加了答案

标签: angular tree angular2-template angular2-directives


【解决方案1】:

这与 Angular 无关,但使用纯 Javascript,我设法编写了这段使用尾递归并完成工作的代码:

function walkNodes(nodes, term) {
    let hasValue = false;

    nodes.forEach(node => {
        if (searchTree(node, term)) {
        hasValue = true; 
        return;
      };
    });

    return hasValue;
  }

  function searchTree(tree, term) {
    if (tree.name === term) { return true; }

    if ((tree.subnodes && tree.subnodes.length)) {
      return walkNodes(tree.subnodes, term);
    } 

    return false;
  }

  console.log(walkNodes(myTree, 'parent1_child2')); // true
  console.log(walkNodes(myTree, 'secondparent2_child1')); // true
  console.log(walkNodes(myTree, 'secondparent2_child12')); // false

https://jsfiddle.net/efdou6q1/

【讨论】:

  • 感谢 Boris Lobanov,我将尝试在我的解决方案中实施
  • 您的逻辑是正确的,但是在角度如何绑定树时,我们需要在每次用户在输入框或文本框中输入内容时进行绑定
  • 你介意“绑定”树吗?您自己的实现只是返回真或假,就像我的一样。您可以简单地调用相同的过滤器方法,只需使用整个树和用户输入的术语调用 walkNodes 方法
  • @BorisLobanov 你能举个例子吗,因为我有同样的问题,我厌倦了这样称呼它 this.SearchelementTree = this.SearchelementTree.filter(items => this.walkNodes(items,事件));
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2010-12-12
  • 2015-08-31
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-10-31
相关资源
最近更新 更多