javascript - 如果我对父 div 使用 IF 条件，openseadragon 会抛出错误

Question

我正在我的 angular4 项目中实现 openseadragon，

如果我像下面这样使用它不起作用并抛出错误 **Cannot read property 'appendChild' of null,

<div *ngIf="(pictures$ | async).length" >
    <div id="seadragon-viewer" style="height: 333px;color: #333;background-color: black;">
     </div>
</div>

但是如果我在我的 IF 条件下直接使用 true 那么它工作得很好，

<div *ngIf="true" >
    <div id="seadragon-viewer" style="height: 333px;color: #333;background-color: black;">
     </div>
</div>

无法解决这个问题，任何帮助将不胜感激。

Answer 1

在您的 ts 文件中，您appendChild通过 Id 获取元素来执行此操作seadragon-viewer。在第二种情况下，您的元素将始终存在于 DOM 中，因此它工作正常。当它从 DOM 中删除整个元素时，您会收到此错误*ngIf。false你可以做两件事。

1. [hidden]代替*ngIf. _
2. 在使用之前appendChild检查获取的元素的值（首选）。

Answer 2

在您的组件中创建一个变量showSeaDragon: boolean = false;

加载pictures$完成后，将布尔值设置为truewhenpictures$.length>0

<div *ngIf="showSeaDragon" >