问无法读取未定义的属性(读取“nativeElement”)
EN

Stack Overflow用户

提问于 2022-10-18 23:04:45

回答 2查看 54关注 0票数 -1

假设我有两个组件--父组件和子组件，并且我试图从父组件访问子组件的DOM元素。但我面临的问题是未定义的原生元素。

export class ChildComponent implements OnInit,AfterViewInit{
   @ViewChild('pdfData', { read: ElementRef }) domData: ElementRef;
   constructor()
   ngOnInit(): void {
    some code..
  }
  ngAfterViewInit(): void {
    this.domData.nativeElement;
  }
}

子组件DOM元素

<div #pdfData class="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>

下面的代码是父组件，我正在尝试访问子组件DOM元素，问题就在这里。

export class ParentComponent implements OnInit,AfterViewInit{
@ViewChild('pdfData',{ read: ElementRef }) pdf: ChildComponent ;
constructor()
ngOnit(): void{
some code...
}
ngAfterViewInit() {
    this.pdf.domData.nativeElement;
    console.log(this.pdf.domData.nativeElement) //undefine here
  }
downloadPDF(isSubmit:any) {  
    debugger      
    let doc = new jsPDF();
    let rows: Array<any> = [];
    let header: Array<any> = [];
    let medicineInfo: any;
    let physicianInfo: any;
    //this.isShow = true;
    //this.changeRef.detectChanges();
    let content= this.pdf.domData.nativeElement; //undefine 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  
          }); 
}

这是我的Stackblitz 链接

angular

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-10-18 23:44:47

您的"pdfData“模板引用变量属于”子“，因此不能从”父“访问使用viewChild。

你可以做父母

<div class="col-sm-6">
  <!--in click button you pass a template reference variable of the child-->
  <button ...  (click)="downloadPDF(child,false)" >
    Print
  </button>
  <!--see that you use a template reference variable in child-->
  <my-child #child></my-child>
</div>

您的函数downloadPDF

downloadPDF(child:any,isSubmit: any) {
    ....
    let content = child.domData.nativeElement; //see how access to the property
                                               //domData of the "child"
                      //yes, by defect all the variables in Angular are public
                      //include the variables that makes reference
                      //to viewChild
    ...
}