在组件中我有一些代码片段
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 站点渲染良好。
为什么会发生这种情况?
最佳答案
根据我的评论,您的问题是由于竞争条件引起的:当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);
}
关于javascript - 无法向 DOM 添加元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45663325/