0

我一直在 Angular 组件中使用 ng2-pdfjs-viewer。但是，仅当满足条件时，我才需要 div 元素占用 DOM 中的空间。所以我使用 *ngIf 作为 div。但是，当我使用 ngIf 时，分页符。在控制台中，它不会在主窗口中显示任何错误。在控制台侧边栏中，有关于 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 div 上没有 ngIf：正确渲染元素。

在此处输入图像描述

使用 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，渲染也会混乱。

在此处输入图像描述

4

2 回答 2

0

不知道pdfViewerAutoLoadCE.pdfSrc || pdfViewerAutoLoadJD.pdfSrc“页面损坏”的内容或看到的影响，很难确定问题出在哪里。但是，如果您将 pdf 查看器包装在带有 someCondition 的 ng-container 中会怎样？

如有必要，请调整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 来重现问题。

于 2022-01-24T13:44:59.560 回答
0

看到您的屏幕截图后，仍然很难发现问题，但您的模板似乎取决于您要删除的一些 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。

于 2022-01-25T10:36:08.963 回答