无法访问Angular组件中动态创建的元素-Java 学习之路

在我使用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() 时，节点将添加到 nodeList . 在视图中， nodeList 中的所有节点都将添加到for循环中的视图中（ *ngFor ） . 在完全执行函数 addNewNodeWithEdge() 之前，不会执行对视图的添加 . 由于 document.getElementById 在刷新视图之前执行，因此返回null .

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

1 回答

0
在这里，在下面的给定行中，您需要提供元素的ID而不是索引 .
```
var elementGenerated = document.getElementById(this.secondNode); //returns null
```
回复于 2024-04-19T20:29:09+08:00

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

1 回答

相关问题