Question

我正在使用Angular 7，但ng-template出现问题，由于ng-template内的画布，我无法获取画布参考，并且因为使用ngbModal而无法更改ng-template 。如何访问画布？谢谢

这是错误：

错误：无法读取未定义的属性'nativeElement'

打字稿：

import { Component, ViewChild } from "@angular/core";
import { NgbModal, ModalDismissReasons } from "@ng-bootstrap/ng-bootstrap";

@Component({
  selector: "ngbd-modal-basic",
  templateUrl: "./modal-basic.html"
})
export class NgbdModalBasic {

  @ViewChild("canvasComm") canvas; //I declared canvas here
  closeResult: string;
  imgloaded: boolean = false;
  img_user;

  constructor(private modalService: NgbModal) {}

  open(content) {
    this.modalService
      .open(content, { ariaLabelledBy: "modal-basic-title" })
      .result.then(
        result => {
          this.closeResult = `Closed with: ${result}`;
        },
        reason => {
          this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
        }
      );
  }

  uploadImg(event: any): void {
    var file = event.target.files[0];
    const extension = file.name.split(".")[1].toLowerCase();
    const size = file.size / 1024 / 1024;
    this.imgloaded = true;
    let canvas = this.canvas.nativeElement; //the problem in this line, canvas is null
    let context = canvas.getContext("2d");

    var render = new FileReader();
    render.onload = () => {
      var img = new Image();
      img.onload = () => {
        var hRatio = canvas.width / img.width;
        var vRatio = canvas.height / img.height;
        var ratio = Math.min(hRatio, vRatio);
        var centerShift_x = (canvas.width - img.width * ratio) / 2;
        var centerShift_y = (canvas.height - img.height * ratio) / 2;
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.drawImage(
          img,
          0,
          0,
          img.width,
          img.height,
          centerShift_x,
          centerShift_y,
          img.width * ratio,
          img.height * ratio
        );
      };
      let csv: string = render.result as string;
      img.src = csv;
    };
    this.img_user = event.target.files[0];
    render.readAsDataURL(event.target.files[0]);
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return "by pressing ESC";
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return "by clicking on a backdrop";
    } else {
      return `with: ${reason}`;
    }
  }
}

模板

<ng-template #content let-modal>
  <!-- ng-template is the problem -->
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Profile update</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <div>
      <div class=" box-grid">
        <span class="bull ">Photo</span>
      </div>
      <div class="border-formeDoc  Shadow" style="padding: 0;">
        <div class="profile-img">
          <!-- canvas is here -->
          <canvas width="120" height="120" id="canvasComm" #canvasComm [hidden]="!imgloaded" style="    border-radius: 50%;     
                      background-color: white;"></canvas>
          <img src="/assets/icons/iconcommercial.png" alt="" *ngIf="!imgloaded" style="filter: grayscale(1);" />
          <div class="file btn btn-lg btn-primary">
            <input accept=".png,.jpg,jpeg" type="file" (change)="uploadImg($event)" name="file" />
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
  </div>
</ng-template>

<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>

<hr>

<pre>{{closeResult}}</pre>

Answer 1

作为解决方法，您可以尝试以下操作：

.html

<canvas width="120" height="120" id="canvasComm" #canvasComm [hidden]="!imgloaded" style="    border-radius: 50%;     
                      background-color: white;"></canvas>

 <input accept=".png,.jpg,jpeg" type="file" (change)="uploadImg($event, canvasComm )" name="file" />

.ts

 uploadImg(event: any, canvas:any): void {
 }

Answer 2

在模板中，您在#canvasComm元素内定义了参考变量 canvas。必须将相同的变量名与@ViewChild一起使用，以使其起作用。

export class NgbdModalBasic {

  @ViewChild("canvasComm") canvas;

更新

如果仍然无法解决问题，您可以尝试摆脱@ViewChild并改用canvas来访问document.getElementById元素。

let canvas = document.getElementById("canvasComm");

Answer 3

角度8

@ViewChild（“ canvasComm”，{statics：false}）画布；

角度7 @ViewChild（“ canvasComm”）canvas;

使用此

错误TypeError：由于ng-template无法读取未定义的属性'nativeElement'

3 个答案: