Angular 6 with chart.js TypeError：item为null

Question

我正在尝试在我正在开发的Angular应用程序中使用Chartjs。

因此，在更改选择菜单的值时，应该根据所选值绘制图表。但我得到TypeError：item为null。我到处寻找，我发现的解决方案无效。

这个选择部件代码：

<mat-form-field>
 <mat-select [(ngModel)]="selected" placeholder="Y" 
  (ngModelChange)="drawBubbleChart($event)">
     ....
 </mat-select>
</mat-form-field>

这是我的HTML代码：

<div *ngIf="chart">
    <canvas #ctrx >{{ chart }}</canvas>
</div>

我的代码：

@ViewChild('ctrx') private chartRef;

drawBubbleChart(){
    let ds = this.prepareData();
    let chartID = this.chartRef.nativeElement.getContext("ctrx");
    let options = {
          title: {
            display: true,
            text: "Testing what's up"
          }, scales: {
            yAxes: [{ 
              scaleLabel: {
                display: true,
                labelString: "One"
              }
            }],
            xAxes: [{ 
              scaleLabel: {
                display: true,
                labelString: "Two"
              }
            }]
          }
        }
    console.log("data =>", ds);
    if (ds.length !== 0) {
        console.log("inside if !== 0");
        this.chart = new Chart(chartID,{
            type: 'bubble',
            datasets: ds,
            options: options
        });
    }
}

我尝试了let chartID = document.getElementById("ctrx");，但它给了我一个TypeError：item也是null。

如何在选择选项后解决此问题并绘制图表？

Answer 1

确保不使用*ngIf，它会破坏你的画布和ElementRef。用CSS隐藏它。

另外，我使用getContext('2d')

<canvas #canvas>{{ chart }}</canvas>

@ViewChild('canvas') canvas: ElementRef;
this.canvas.nativeElement.getContext('2d')