本机元素无法在 angular 5 中正确访问

Question

我有这样的问题。我正在使用 jsPdf 在 angular 5 中制作报告生成部分。这是我的 component.html 文件部分。

<div class="content-wrapper">
  <div class="container-fluid">

    <div id="content">
      <h1>My First PDF</h1>
      <p>Hello Welcome To Easy Lab Reservation System</p>
    </div>
    <button (click)="downloadPdf()" class="btn btn-info">Create Report</button>
  </div>

这是我的 component.ts 文件。

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import * as JSPDF from 'jspdf';

@Component({
  selector: 'app-report',
  templateUrl: './report.component.html',
  styleUrls: ['./report.component.css']
})
export class ReportComponent implements OnInit {

  @ViewChild('content') content: ElementRef;

  constructor() { }

  ngOnInit() {
  }

  downloadPdf(){
    const doc = new JSPDF();
    let specialElementHandlers = {
      '#editor' : function(elemnt, renderer){
        return true;
      }
    };

    let content = this.content.nativeElement;

    doc.fromHTML(content.innerHtml,10,10,{
        'width': 190,
        'elementHandlers': specialElementHandlers

    });
    doc.save('MyFirst.pdf');


  }

}

当我点击创建报告按钮时。它给我这样的错误。

ERROR TypeError: Cannot read property 'nativeElement' of undefined
    at ReportComponent.downloadPdf (report.component.ts:26)
    at Object.eval [as handleEvent] (ReportComponent.html:113)
    at handleEvent (core.js:13589)
    at callWithDebugContext (core.js:15098)
    at Object.debugHandleEvent [as handleEvent] (core.js:14685)
    at dispatchEvent (core.js:10004)
    at eval (core.js:10629)
    at HTMLButtonElement.eval (platform-browser.js:2628)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4751)

我搜索了很多时间来找出解决这个问题的方法。但这些还不足以完全满足我的要求。有人可以帮我用我的代码解决这个问题吗？我想了解

let specialElementHandlers = {
          '#editor' : function(elemnt, renderer){
            return true;
          }
        };

这个代码部分在这里做什么？

谢谢！！

Answer 1

将 <div id="content"> 更改为 <div #content>。

本机元素无法在 angular 5 中正确访问

native element is cannot access correctly in in angular 5

jspdf

angular