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

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>  

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

我该如何解决？ 创建元素后是否应该刷新组件？ 如果是这样，如何在Angular中刷新组件？ 任何帮助深表感谢。

Answer 1

在这里，在给定的行下面，您需要提供element的ID而不是index。

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