如何等待树节点完全展开

Question

环境：（“@ 角度/核心”：“〜7.1.0”，“角度树组件”：“^ 8.0.1”） 问题是我正在过滤节点子节点，但对于某些节点，子节点的数量太大，这会产生错误，因为 io 无法找到等待节点完全展开的方法。

这是错误：

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of null (reading 'length') TypeError: Cannot read properties of null (reading 'length')     at DevicetreeComponent.<anonymous> (devicetree.component.ts:196:18)     at step (tslib.es6.js:97:1)     at Object.next (tslib.es6.js:78:45)     at fulfilled (tslib.es6.js:68:42)

我尝试添加 settimeout，但我传递的时间对某些节点有效，但对其他节点无效，因为子节点的大小不同。

这是我的代码：

  @HostListener('window:findNodeInDeviceTree', ['$event'])
  findNodeInDeviceTree(e) {
    var sysNr = "";
    var url;
    this.searchDeviceId = e.detail.id;
    this.searchDeviceName = e.detail.name;
    this.searchDeviceTyp = e.detail.typ;
    if (this.searchDeviceId.includes("-")) {
      sysNr = this.searchDeviceId.split("-")[0];
    } else {
      sysNr = this.searchDeviceId;
    }
    url = "/device/" + sysNr;
    this.devicetreeService.findNodePath(url).subscribe(
      async node => {

        this.searchNode = node;
        //expand root
        var root = this.tree.treeModel.getNodeBy((node) => node.data.entityId == '');
        this.collapseNode(root);
        this.expandNode(root, false);
        await this.wait(100);

        var pc = root.data.children.length > 0 && root.data.children.filter(pc => pc.name == this.searchNode.computerName)[0];

        //expand computer
        this.expandNode(pc, false);
        //expand communicationInterface
        await this.wait(100);

        var com = pc.children.length > 0 && pc.children.filter(com => com.communicationInterfaceDataDTO.interfaceNo == this.searchNode.interfaceNumber)[0];
        
        this.expandNode(com, false);
        //is TCP/TP or HTTP, serial?
        if (this.searchNode.taId != 0) {
          var ta = com.children.length > 0 && com.children.filter(ta => ta.entityId == this.searchNode.taId)[0];
          this.expandNode(ta, false);
          await this.wait(100);

        } else {
          var ta = com;
        }
        var device = ta.children.filter(device => device.entityId == sysNr)[0];
        if (this.searchDeviceTyp == 'device') {
          //for auto scroll
          var node = device;
        } else {
          var node = await this.findNodeRecurse(device);
        }
        //select the node
        this.tree.treeModel.getNodeById(node.id).toggleActivated();
        //auto scroll to node
        var labels = document.getElementsByTagName("label");
        for (var i = 0; i < labels.length; i++) {
          if (labels[i].innerHTML == node.name) {
            labels[i].scrollIntoView();
            break;
          }
        }
      }
    );
  }


  async expandAllNodeLazy(node) {
    let i = 0;
    while (i < 50) {
      node.expandAll();
      await this.wait(100);
      i++;
    }
    console.log("tree loaded");
  }

  wait(ms) {
    return new Promise(resolve => {
      console.log(`waiting ${ ms } ms...`);
      setTimeout(resolve, ms );
    });
  }

    expandNode(treeNode: TreeNode, all: boolean = false) {
    const node = this.tree.treeModel.getNodeById(treeNode.id);
    if (node != null) {
      if (all) {
        this.expandAllNodeLazy(node);
      } else {
        node.expand();
    }
    }
  }

Answer 1

添加更多时间等待函数“await this.wait(10000)”