Угловой 6 с chart.js TypeError: элемент является нулевым

Question

Я пытаюсь использовать Chartjs в разрабатываемом приложении для Angular.

Таким образом, при изменении значения меню выбора необходимо рисовать диаграмму в соответствии с выбранным значением.Но я получаю TypeError: item is 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>

мой ts код:

@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");, но это дает мне Ошибка типа: элемент также равен нулю .

Как можно решить эту проблему и нарисовать график после выбора опции ??

Answer 1

Убедитесь, что вы не используете *ngIf, это уничтожает ваш холст и ElementRef.Скройте это с помощью CSS.

Также я использую getContext('2d')

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

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