Question

在我使用Angular 4的应用程序中，我正在尝试动态创建一个元素并在按钮单击时获取其位置（两个动作都在一次按钮单击时发生）。但是，由于在访问其位置时未创建元素，因此该元素返回null。

这是点击时执行的方法：

  addNodeWithEdge(node){
    this.addNewNode();    
    this.currentNode = this.nodeList.length-1;
    var elementGenerated = document.getElementById(this.currentNode); //returns null
    var to = this.getCentreOfElement(elementGenerated);
  }

  addNewNode() {
    let newNode = new SntNode("", []);
    this.nodeList.push(newNode);
  }

  getCentreOfElement(el) {
    var xPos = el.offsetLeft + el.offsetWidth/2;
    var yPos = el.offsetTop - el.offsetHeight/2;
    return {
      x: xPos,
      y: yPos
    };
  }

并且在观点上：

<a (click)="addNewNode()"></a>

<ng-container *ngFor="let node of nodeList; index as n">
    <div class="node-block" id={{n}}>
         <div class="node-cmp" (click)="onSelectNode(n)">
              <a class="a-tag-circle">{{node.name}}</a>
         </div>
         <div class="node-opts"></div>
    </div>
</ng-container>

触发nodeList时，节点会添加到addNewNode()。在视图中，nodeList中的所有节点都以for循环（*ngFor）添加到视图中。在完全执行函数addNewNodeWithEdge()之前，不会执行对视图的添加。由于在刷新视图之前执行了document.getElementById，因此它返回null。

我该如何解决这个问题？我应该在创建元素后刷新组件吗？如果是这样，我如何刷新Angular中的组件？非常感谢任何帮助。

Answer 1

这里，在下面的给定行中，您需要提供元素的ID而不是索引。

var elementGenerated = document.getElementById(this.secondNode); //returns null

无法访问Angular组件中动态创建的元素

1 个答案: