无法将元素添加到DOM

Question

In component i have some snippet of code

  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);
  }

In html code I have

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

$event return true <=> visible = true, but i have error

 Cannot read property 'insertBefore' of null

without *ngIf site render fine.

Why is this happening?

Answer 1

As per my comment, your issue arises because of a race condition : when the visible property resolves to a truthy value, the ngIf directive will cause the nested DOM node to render. However, this rendering is not completed when this.onClick() is called, meaning that the DOM nodes within in will return null when queried.

In other words, your document.getElementById('previewImg') will return null , and this is the source of the error.

To circumvent this, you will have to ensure that the selector is executed at the end of the call stack: this can simply be done by using window.setTimeout(fn, 0) , eg:

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);
}