角-NG2-pdfjs-查看器在ngIf div中使用时未被初始化

Question

component.html

有一个选项可以使用文件类型的输入元素选择文件，如下所示。所选文件应显示在具有pdfViewer的div中。默认情况下，此div不显示在DOM中。这是在div上使用*ngIf='isCeFile'定义的。即默认情况下isCeFile = false

        <div class='flex-align-center'>
          <span style="font-weight: 500;">Client Email pdf: </span>
          &nbsp;
                
          <mat-icon color='primary' (click)="ceFilePicker.click()" style="cursor: pointer;">
            add_circle
          </mat-icon>
        </div>

        <input type="file" accept=".doc, .docx, .pdf"
         (change)="onChange($event, 'CLIENT-EMAIL')" (click)="$event.target.value=null"
         #ceFilePicker style="margin: 0; visibility: hidden;">

      // PDF Viewer Div
      <div class='flex' *ngIf='isCeFile'>
        <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>

component.ts

处理文件输入的方法更改ngIf for pdfViewer div中使用的变量。但是，在执行此方法时，不初始化div。因此，没有定义pdfViewer元素。因此，所选文件不会分配给pdfViewer。

在语句pdfViewer之前，是否有任何方法在onChange()方法中初始化div，即初始化this.pdfViewerAutoLoadCE.pdfSrc = this.clientEmailFile;元素

  isCeFile = false;
  @ViewChild('pdfViewerAutoLoadCE') pdfViewerAutoLoadCE;

  onChange(event, docType) {
    
      this.clientEmailFile = event.target.files[0];
      this.ceFileChanged = true;
      this.isCeFile = true;
      console.log('this.pdfViewerAutoLoadCE', this.pdfViewerAutoLoadCE);
      // console output: undefined
      
      this.pdfViewerAutoLoadCE.pdfSrc = this.clientEmailFile;
      this.pdfViewerAutoLoadCE.refresh();

  }

到目前为止，我在没有ngIf on pdfViewer div的情况下使用它，它工作得很好。但是，只有在需要时才需要显示这个div，这样就不会在页面上显示空空间。

Answer 1

一种方法可以是使用ng-template代替。如果不满足此条件，请显示其他内容。因此，div在打开布尔值时会发生变化。由于我不太确定您打算呈现哪个div，哪个不能，您可能需要更改*ngIf="isCeFile; else noFile"的深度，但我希望您了解这个想法。https://angular.io/api/common/NgIf#showing-an-alternative-template-using-else

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

</div>
</div>

<ng-template #noFile>
   <div> 
   Oops, no file.
   </div>
</ng-template>