javascript - Använda getElementById i Angular returnerar undefined

För enkelhetens skull tar jag bort den onödiga koden.

Redan försökt med ngAfterViewInit och ngOnChanges och ändå är this.chart odefinierad.

.html

<div class="chartContainer">
  <canvas id="chart" class="canvas"></canvas>
</div>

.ts

 ngOnInit() {
   this.drawChart();
}
drawChart() {
    this.chart = document.getElementById("chart");
    console.log(this.chart);
}

Svar #1

Jag skulle använda ViewChild för en bindning:

html

<div class="chartContainer">
  <canvas #chart id="chart" class="canvas"></canvas>
</div>

ts

@ViewChild('chart') chart: ElementRef<HTMLCanvasElement>; // Might need to add { static: true } after 'chart;



ngAfterViewInit() {
    console.log(this.chart.nativeElement)
}

Svar #2

Du bör injicera tjänst i din komponent för att anropa dokument.

import { DOCUMENT } from '@angular/common';

export class YourComponent {
  constructor(@Inject(DOCUMENT) private document: HTMLDocument) {
...

Relaterade artiklar