Question

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

setClickable()

在HTML代码中我有

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

$ event return true＆lt; =＆gt; visible = true，但我有错误

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

没有* ngIf网站渲染正常。

为什么会这样？

Answer 1

根据我的评论，您的问题出现是因为竞争条件：当visible属性解析为真值时，ngIf指令将导致嵌套DOM要渲染的节点。但是，在调用this.onClick()时，此呈现未完成，这意味着在查询时，其中的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);
}

无法向DOM添加元素

1 个答案: