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

Question

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

如果我使用如下，它不工作并抛出错误**无法读取属性＆quot; appendChild＆＃39; 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

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

加载pictures$时，在true

时将布尔设置为pictures$.length>0

<div *ngIf="showSeaDragon" >

Answer 2

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

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