Родной элемент не может получить правильный доступ в в угловых 5 - PullRequest
Новая
       10

Родной элемент не может получить правильный доступ в в угловых 5

0 голосов
/ 24 июня 2018

У меня такая проблема. Я делаю часть генерации отчетов в угловых 5, используя jsPdf. Это моя часть файла 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;
          }
        };

что здесь делает эта часть кода?

Спасибо !!

1 Ответ

0 голосов
/ 24 июня 2018

изменить <div id="content"> на <div #content>.

...