angular - 如何以角度访问多个树的项目？

Question

我在项目中使用 Angular mat-tree 作为表格的过滤器。我用复选框创建了 3 个不同的嵌套树（树的图像）。

我使用后端数据生成了这些树，并在我的前端（使用 Spring 和 Angular 8）中创建了一个服务，如下所示。

现在，我想使用 this.treeControl.dataNodes.indexOf(node) 访问 3 棵树的每一项，但问题是 dataNodes 只存储最新创建的树（此处为“场景”树）。因此，当我将 this.treeControl.dataNodes.indexOf(node) 用于另一棵树时，它会说： indexOf(node) = -1

我想知道是否有办法通过索引访问所有这些树的项目。如果可能的话，我还需要访问所有级别为 0 的项目。

我分享了一个 stackblitz 演示，这是我的代码的简化版本：https ://stackblitz.com/edit/angular-wvbg5j

export class FiltersDatabase {
  [x: string]: any;

  dataChangeSub = new BehaviorSubject<TodoItemNode[]>([]);
  dataChangeSce = new BehaviorSubject<TodoItemNode[]>([]);
  dataChangeAlg = new BehaviorSubject<TodoItemNode[]>([]);

  subjectsTypes : SubjectType[];
  scenarios: Scenario[];
  algorithms: Algorithm[];


  get dataSub(): TodoItemNode[] { return this.dataChangeSub.value; }
  get dataSce(): TodoItemNode[] { return this.dataChangeSce.value; }
  get dataAlg(): TodoItemNode[] { return this.dataChangeAlg.value; }

  constructor(private scenarioService : ScenarioService, private protocolService: ProtocolService) {
    this.initialize();
  }

  initialize() {
    // Build the tree nodes from Json object. The result is a list of `TodoItemNode` with nested
    //     file node as children.

    //creating the subjects filter
    this.protocolService.getSubjectTypes().
    subscribe(response => {
      this.subjectsTypes = response;

      let namesSub : any = [];

      this.subjectsTypes.forEach(elem =>{
        let namesSub_node: string = elem.name;
        namesSub.push(namesSub_node);
      });
      let root_objSub: any = {
        "Subjects" : namesSub
      }
      const dataSub = this.buildFileTree(root_objSub, 0);
      this.dataChangeSub.next(dataSub);
    });


    //creating the PIs filter
    this.protocolService.getAlgorithms()
    .subscribe(response =>{
      this.algorithms = response;

      let namesAlg : any = [];

      this.algorithms.forEach(elem =>{
        let namesAlg_node: string = elem.name;
        namesAlg.push(namesAlg_node);
      });
      let root_objAlg: any = {
        "Algorithms" : namesAlg
      }
      const dataAlg = this.buildFileTree(root_objAlg, 0);
      this.dataChangeAlg.next(dataAlg);
    });

    //creating the Scenarios filter
    this.scenarioService.getScenarios()
    .subscribe(response => {
      this.scenarios =response;

      let tree_Sce: any = []; // this will be array of objects
      // collect all the descriptions and names nodes form the data array
      let idSce: any= [];
      let namesSce:any = [];

      this.scenarios.forEach(elem => {

        let idSce_node: number = elem.scenario_id
        idSce.push(idSce_node);

        let namesSce_node: string= elem.name
        namesSce.push(namesSce_node);
      });

      let root_objSce: any = {
        "Scenarios" : {
          "ID": idSce,
          "Names" : namesSce
        }
      };
      tree_Sce.push(root_objSce);

      const dataSce = this.buildFileTree(root_objSce, 0);
      this.dataChangeSce.next(dataSce);
    });


  }

  /**
  * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object.
  * The return value is the list of `TodoItemNode`.
  */
  buildFileTree(obj: {[key: string]: any}, level: number): TodoItemNode[] {
    return Object.keys(obj).reduce<TodoItemNode[]>((accumulator, key) => {
      const value = obj[key];
      const node = new TodoItemNode();
      node.item = key;

      if (value != null) {
        if (typeof value === 'object') {
          node.children = this.buildFileTree(value, level + 1);
        } else {
          node.item = value;
        }
      }

      return accumulator.concat(node);
    }, []);
  }
}

标签： angulartypescripttreeangular-materialindexof