angular 通过document.getElementById(‘c1’);获取html元素报错,具体如下:

  1. core.js:4352 ERROR TypeError: Cannot read property 'appendChild' of null
  2. at new Chart (chart.js:19)
  3. at Line.push.zJSt.Plot.createG2 (plot.js:27)
  4. at Line.Plot [as constructor] (plot.js:18)
  5. at new Line (index.js:9)
  6. at DisplayboardComponent.chartData (displayboard.component.ts:48)
  7. at DisplayboardComponent.ngOnInit (displayboard.component.ts:25)
  8. at callHook (core.js:3105)
  9. at callHooks (core.js:3075)
  10. at executeInitAndCheckHooks (core.js:3027)
  11. at refreshView (core.js:7333)

百度了一下原因是你获取的节点不存在引起的。分析发下我这个是动态加载组件,可能加载完后,页面上还没有该组件的html元素,于是获取不到,最后找到angular的一个ElementRef来获取元素,具体如下:
//原先获取方式
const c1 = document.getElementById(‘c1’);
//修改后获取方式
const c2 = this.elRef.nativeElement.querySelector(‘#c1’);

  1. import { Component, ElementRef, OnInit } from '@angular/core';
  2. @Component({
  3. selector: 'app-XXX',
  4. templateUrl: './XXX.component.html',
  5. styleUrls: ['./XXX.component.scss']
  6. })
  7. export class XXXComponent implements OnInit {
  8. constructor(private elRef : ElementRef) { }
  9. ngOnInit(): void {
  10. //原先获取方式
  11. const c1 = document.getElementById('c1');
  12. //修改后获取方式
  13. const c2 = this.elRef.nativeElement.querySelector('#c1');
  14. }