Property 'nativeElement' does not exist on type 'TemplateRef<any>'-CodePudding

Here is my viewchild code that i wrote

@ViewChild('pdfData', { read: TemplateRef }) pdfData: TemplateRef<any>;

And below code is my html code that i'm calling

<ng-template #pdfData>
 <div id="pdfData" >
  <table *ngFor="let hubxReport of hubxReportList; let i=index">
    <tr>
      <th>{{hubxReport.categoryName}}   "Test"</th>
    </tr>
    <tr>
      <th>{{column}}</th>
    </tr>
    <tr *ngFor="let item of hubxReport.hubxDataItems">
      <td></td>
      <td>{{item.itemTitle}}</td>
      <td>{{item.itemValue}}</td>
      <td>{{item.itemUnit}}</td>
      <td>{{item.normalRange}}</td>
    </tr>
  </table>
 </div>
</ng-template>

And here the issue occurs. How can i solve this issue . If there is any changes i needed please do let me know

downloadPDF(isSubmit:any) {  
    debugger      
    let doc = new jsPDF();
    let rows: Array<any> = [];
    let header: Array<any> = [];
    let medicineInfo: any;
    let physicianInfo: any;
    let content= this.pdfData.nativeElement; //Error comes here
    let _elementHandlers =  
    {  
      '#editor':function(element,renderer){  
        return true;  
      }  
    };  
    doc.html(content.innerHTML,{  
        callback: function (doc) {
          doc.save();
        },
        x: 10,
        y: 80,
        // 'x': 15,
        // 'y': 15,
        width:190,  
        'elementHandlers':_elementHandlers  
      });

CodePudding user response：

pdfData should be ElementRef instead of templateRef

CodePudding user response：

remove ng-template and write #pdfData on div as shown below

<ng-container  ngIf="isSHow">
  <div id="pdfData" #pdfData>
   <table *ngFor="let hubxReport of hubxReportList; let i=index">
    <tr>
     <th>{{hubxReport.categoryName}}   "Test"</th>
   </tr>
   <tr>
    <th>{{column}}</th>
   </tr>
   <tr *ngFor="let item of hubxReport.hubxDataItems">
    <td></td>
    <td>{{item.itemTitle}}</td>
    <td>{{item.itemValue}}</td>
    <td>{{item.itemUnit}}</td>
    <td>{{item.normalRange}}</td>
  </tr>
 </table>
</div>

and in your component

construstor(private changeRef: ChangeDetectorRef)

downloadPDF(isSubmit:any) {  
  this.isShow = true;
  this.changeRef.detectChanges();
  ... try to access after that

}