javascript - 无法向 DOM 添加元素

Question

在组件中我有一些代码片段

  isLoaded($event) {
    console.log($event);
    this.visible = $event;
    console.log(this.visible);
    this.onClick();
  }

  onClick() {
    this.listImage = this.imageService.getImage();
    let span = document.createElement('span');
    span.innerHTML = ['<img class="thumb" src="', this.listImage[0],
      '" title="', '"/>'
    ].join('');
    document.getElementById('previewImg').insertBefore(span, null);
  }

在 html 代码中我有

<div *ngIf="visible">
<div id='previewImg' class="img_content"></div>

$event return true <=>visible = true，但我有错误

 Cannot read property 'insertBefore' of null

没有 *ngIf 站点渲染良好。

为什么会发生这种情况？

Answer 1

根据我的评论，您的问题是由于竞争条件引起的:当visible属性解析为真值时，ngIf指令将导致嵌套 DOM 节点渲染。但是，当调用 this.onClick() 时，此渲染并未完成，这意味着 in 中的 DOM 节点在查询时将返回 null。

换句话说，您的 document.getElementById('previewImg') 将返回 null，这就是错误的根源。

为了避免这种情况，您必须确保选择器在调用堆栈的末尾执行:这可以简单地通过使用 window.setTimeout(fn, 0) 来完成，例如:

onClick() {

    // Other logic can happen since they do not depend on the updated DOM
    this.listImage = this.imageService.getImage();
    let span = document.createElement('span');
    span.innerHTML = ['<img class="thumb" src="', this.listImage[0],'" title="', '"/>'].join('');

    // Query at end of callstack
    window.setTimeout(function() {
        document.getElementById('previewImg').insertBefore(span, null);
    }, 0);
}