当与ngIf一起使用时，角NG2-pdfjs-查看器会破坏html页面。

Question

我一直在使用NG2-pdfjs-查看器的角度组件。但是，只有在满足条件时，我才需要div元素来占用DOM中的空间。所以我用*ngIf做div。但是，当我使用ngIf时，页面会中断。在控制台中，它不会在主窗口中显示任何错误。在控制台侧栏中，vendor.js中有4个错误的通知。然而，错误是看不见的。

component.html:使用NG2-pdfjs-查看器的部分

  <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的任何使用而中断。

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

编辑：添加呈现组件的屏幕截图，

没有ngIf的pdfViewer 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

看到你的截图，仍然很难发现问题，但是你的模板似乎取决于你要删除的某个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-查看器在模板中的存在。你应该在模板中重构育儿div以使用或不使用pdf。

Answer 2

不知道pdfViewerAutoLoadCE.pdfSrc || pdfViewerAutoLoadJD.pdfSrc的内容，也不知道“破坏页面”的影响，很难确定问题出在哪里。但是，如果您将您的pdf查看器封装在ng容器中，并在someCondition中显示或不显示pdf，该怎么办？

如果有必要，请将ng-container调整到只有pdf-查看器受影响的深度，以便您的顶级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

如果问题仍然存在，请做一个堆栈闪电战来重现这个问题。