Цвет градиента для линейной диаграммы в ng2-диаграммах

Question

Я пытаюсь применить цвет градиента для линейного графика в ng2-диаграммах .Но я получаю ошибку

ERROR TypeError: Cannot read property 'nativeElement' of undefined

Код

<canvas #myCanvas [colors]="lineChartColors" ...
export class Demo {
  @ViewChild("myCanvas") canvas: ElementRef;
  lineChartColors;

// in ngOnInit
let gradient = this.canvas.nativeElement.getContext('2d').createLinearGradient(0, 0, 0, 200);
gradient.addColorStop(0, 'green');
gradient.addColorStop(1, 'white');
this.lineChartColors = [
  {
    backgroundColor: gradient
  }
];

Answer 1

HTML не полностью существует в хуке ngOnInit.Вы должны сделать это внутри функции ngAfterViewInit().Определение для этого ловушки:

ngAfterViewInit () Respond после Angular инициализирует представления компонента и дочерние представления / представление, в котором находится директива.

Это означает, чтоHTML готов здесь, когда вы вызываете его в ngOnInit(), у вас фактически нет этого элемента на странице.

введите здесь для получения дополнительной информации