当源为null时，如何隐藏包含ng2pdfjsviewer的div？

Question

我有一个使用ng2-pdfjs-viewer显示pdf的应用程序，当查看器的源代码为null时，我想隐藏包含查看器的div。我看过一个similar post，但是这和我想要完成的不一样。这是我的代码：

component.ts

//onChange
onChange(event){
this.pdfViewerAutoLoad.pdfSrc = "";
}


//convert and display
@ViewChild('pdfViewerAutoLoad', {static:false}) pdfViewerAutoLoad;
pdf: ArrayBuffer;
_base64ToArrayBuffer(base64) {
  var binary_string = window.atob(base64);
  var len = binary_string.length;
  var bytes = new Uint8Array(len);
  for (var i = 0; i < len; i++) {
      bytes[i] = binary_string.charCodeAt(i);
  }
  return bytes.buffer;
}
b64toBlob = (base64, type = 'application/octet-stream') => 
fetch(`data:${type};base64,${base64}`).then(res => res.blob())

displayPDF(data:any){
this.b64toBlob(response.base64Result).then((data) =>{
this.pdfViewerAutoLoad.pdfSrc = data;
this.pdfViewerAutoLoad.refresh(); 
}

component.html

<div style="height:120vh; width:100%;" *ngIf="this.pdfViewerAutoLoad.pdfSrc !== null">
    <ng2-pdfjs-viewer  #pdfViewerAutoLoad></ng2-pdfjs-viewer>
</div>

当我运行ngIf时，我会得到以下错误：“无法读取未定义的属性'pdfSrc‘”。当查看器的源为空时，如何隐藏包含的div？

Answer 1

该错误指的是this.pdfViewerAutoLoad.pdfSrc，它在三个地方使用:类中两次，模板一次。

该错误意味着this.pdfViewerAutoLoad.pdfSrc尚未启动。在模板中，您可以使用elvis操作符来修复它(？)在pdfSrc之前。

<div style="height:120vh; width:100%;" *ngIf="pdfViewerAutoLoad?.pdfSrc !== null">

或者像这样：

<div style="height:120vh; width:100%;" *ngIf="pdfViewerAutoLoad && pdfViewerAutoLoad.pdfSrc !== null">

它所做的是，因为this.pdfViewerAutoLoad被错误地赋值，角形将等待值传入，然后再进行处理，这将解决该错误--如果它来自模板。

在component类中，还需要先初始化this.pdfViewerAutoLoad属性，然后才能为它的pdfSrc属性赋值。

提示：在访问模板中的类属性时，可以跳过this.。

Answer 2

听着，你想用它自己的定义来隐藏一些东西。一旦元素可见，您的ViewChild ref将获得组件实例，但这永远不会发生，因为它取决于组件本身。也许您应该在另一个变量中捕获您的PDF源，并将您的ngIf与其链接起来。