Angular ng2-pdfjs-viewer 与 ngIf 一起使用时会破坏 html 页面

Question

我一直在 Angular 组件中使用 ng2-pdfjs-viewer。但是，仅当满足条件时，我才需要 div 元素在 DOM 中占据 space 。所以我使用 *ngIf 作为 div。但是，当我使用 ngIf 时，页面中断。在控制台中，它在 main window 中没有显示任何错误。在控制台边栏中，vendor.js 中有 4 个错误的通知。但是，看不到错误。

component.html: 使用ng2-pdfjs-viewer的部分

  <div *ngIf='id'>
    /// more code ///

    <div class='flex' *ngIf="pdfViewerAutoLoadCE.pdfSrc || pdfViewerAutoLoadJD.pdfSrc">  
    //// this is the *ngIf causing problem
      <div style="width: 49%; height: 60vh; margin-right: 1%;">
        <ng2-pdfjs-viewer #pdfViewerAutoLoadCE
        [download]="false" [print]="false" [openFile]="false"
        [fullScreen]='false'></ng2-pdfjs-viewer>
      </div>
      <div style="width: 49%; height: 60vh;" >
        <ng2-pdfjs-viewer #pdfViewerAutoLoadJD
        [download]="false" [print]="false" [openFile]="false"
        [fullScreen]='false'></ng2-pdfjs-viewer>
      </div>
    </div>
  </div>

如果我删除 div 的 ngIf 条件，页面将正确显示。我尝试检查条件的有效性或使用任何其他条件，但是，使用 ngIf 时页面会中断。

我在这里遗漏了什么吗？请帮忙。

编辑： 添加渲染组件的屏幕截图，

在 pdfViewer 上没有 ngIf div：正确呈现元素。

使用 ngIf（将变量分配为 true 或 false 的简单条件）

    <div class='flex' *ngIf="isLoading">
      <div style="width: 49%; height: 60vh; margin-right: 1%;">
        <ng2-pdfjs-viewer #pdfViewerAutoLoadCE
        [download]="false" [print]="false" [openFile]="false"
        [fullScreen]='false'></ng2-pdfjs-viewer>
      </div>
      <div style="width: 49%; height: 60vh;" >
        <ng2-pdfjs-viewer #pdfViewerAutoLoadJD
        [download]="false" [print]="false" [openFile]="false"
        [fullScreen]='false'></ng2-pdfjs-viewer>
      </div>
    </div>

渲染错误。当 isLoading 设置为 false 时，pdfViewer div 从 DOM 中消失，但页面呈现混乱，如下所示。即使将 isLoading 设置为 true，渲染也会混乱。

Answer 1

不知道 pdfViewerAutoLoadCE.pdfSrc || pdfViewerAutoLoadJD.pdfSrc 的内容，也没有看到“页面损坏”的效果，因此很难确定问题出在哪里。但是，如果您将 pdf 查看器包装在 ng-container 中，并设置了是否显示 pdf 的条件怎么办？

如有必要，请将 ng-container 调整到只有 pdf-viewer 受到影响的深度，以便您的顶级 div 留在模板中。这应该有助于保持您的页面完好无损。

  <ng-container *ngIf="someCondition">
        <pdf-viewer></pdf-viewer>
  </ng-container>

我提供了一个简单的例子：https://stackblitz.com/edit/ng2-pdf-viewer-tvpgs4?file=src%2Fapp%2Fapp.component.html

如果问题仍然存在，请进行 stackblitz 重现该问题。

Answer 2

看到您的屏幕截图后，仍然很难发现问题，但您的模板似乎依赖于您要删除的一些 div 占位符。

    <div class="flex">
      <div style="width: 49%; height: 60vh; margin-right: 1%;">
       <ng-container *ngIf="isLoading>
        <ng2-pdfjs-viewer #pdfViewerAutoLoadCE
        [download]="false" [print]="false" [openFile]="false"
        [fullScreen]='false'></ng2-pdfjs-viewer>
       </ng-container>
      </div>
      <div style="width: 49%; height: 60vh;" >
      <ng-container *ngIf="isLoading>
        <ng2-pdfjs-viewer #pdfViewerAutoLoadJD
        [download]="false" [print]="false" [openFile]="false"
        [fullScreen]='false'></ng2-pdfjs-viewer>
       </ng-container>
      </div>
    </div>

如果以上没有帮助，那么可能 div 的大小取决于 ng-2-pdfjs-viewer 在模板中的存在。您应该重构育儿 div 以在模板中使用或不使用 pdf。

Angular ng2-pdfjs-viewer 与 ngIf 一起使用时会破坏 html 页面

Angular ng2-pdfjs-viewer when used with ngIf breaks the html page

angular

ng2-pdfjs-viewer