首页 文章

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

提问于
浏览 次
2

我是角度2的新手，我在图像裁剪插件上工作，我想在画布上显示图像 . 这是我的HTML代码

<div class="row">
  <div class="col-sm-6">
     <canvas id="layout" width="400" height="300">
        This text is displayed if your browser does not support HTML5 Canvas.
     </canvas>

这是我的打字稿文件

import { Component, OnInit, ViewChild } from '@angular/core';
@Component({
selector: 'app-four',
templateUrl: './four.component.html',
styleUrls: ['./four.component.css']
})
export class FourComponent implements OnInit {
image: HTMLImageElement;
profPic: any;
context: CanvasRenderingContext2D;

constructor() { }
@ViewChild('layout') canvas;
@ViewChild('photo') photo;

ngOnInit() {
const _canvas = this.canvas.nativeElement;
//let photo = this.photo.nativeElement;
this.context = (<HTMLCanvasElement>_canvas).getContext('2d');
  this.image = new Image();
  this.image.src = '../../assets/images/1.jpg';

this.context.drawImage(this.image,20,20,500,260);

}
}

我有错误

ERROR TypeError: Cannot read property 'nativeElement' of undefined

请帮我解决这个问题

谢谢

html5 angular typescript html5-canvas

1 回答

  • 2

    制作 layout 本地模板变量

    <canvas #layout id="layout" width="400" height="300">
        This text is displayed if your browser does not support HTML5 Canvas.
     </canvas>

    WORKING DEMO

    回复于

相关问题