Javascript Angular2和simpleheat插件

我正在尝试使用我的angular2应用程序来使用这个NPM插件（）。它仍然不起作用，但我认为一切都是正确的，但热图没有渲染

我的完整存储库存在以下问题：

heatmap.component.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { simpleheat } from 'simpleheat';

@Component({
  selector: 'app-heatmap',
  templateUrl: './heatmap.component.html',
  styleUrls: ['./heatmap.component.css']
})
export class HeatmapComponent implements OnInit {
  @ViewChild("myCanvas") myCanvas: ElementRef;
  context: CanvasRenderingContext2D;

  constructor() {
  }

  ngOnInit() {
  }

  ngAfterViewInit() {

    let canvas = this.myCanvas.nativeElement;
    var data = [[38, 20, 1], [38, 690, 1], [48, 30, 1]];

    this.context = canvas.getContext("2d");

    var ctx = this.context;

    //test draw
    ctx.clearRect(0, 0, 400, 400);
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, 20, 20);


    //doesn't work ?? Why?
    var heat = simpleheat(ctx);
    heat.data(data);
    heat.draw(100);
  }
}

heatmap.component.html

<canvas #myCanvas id="canvas" width="500" height="500"></canvas>

有人能帮我吗有什么问题吗

---

谢谢

您的代码中有几个错误

无法导入没有类型定义的库，因此需要将库添加到.angular-cli.json文件中，并在组件内部（或全局）声明变量

您正在使用ngAfterViewInit，但没有实现它

Simpleheat需要画布元素的id或对其的引用

默认路由不解析为任何内容，显示空白页

在完成上述所有操作后，将显示heapmap

---

什么东西不起作用？@bugs heatmap没有渲染