编辑文章

描述:

封面图上传：

点击上传图片

angular 通过document.getElementById('c1');获取html元素报错，具体如下：
```js
core.js:4352 ERROR TypeError: Cannot read property 'appendChild' of null
    at new Chart (chart.js:19)
    at Line.push.zJSt.Plot.createG2 (plot.js:27)
    at Line.Plot [as constructor] (plot.js:18)
    at new Line (index.js:9)
    at DisplayboardComponent.chartData (displayboard.component.ts:48)
    at DisplayboardComponent.ngOnInit (displayboard.component.ts:25)
    at callHook (core.js:3105)
    at callHooks (core.js:3075)
    at executeInitAndCheckHooks (core.js:3027)
    at refreshView (core.js:7333)
```
百度了一下原因是你获取的节点不存在引起的。分析发下我这个是动态加载组件，可能加载完后，页面上还没有该组件的html元素，于是获取不到，最后找到angular的一个ElementRef来获取元素，具体如下：
**//原先获取方式
const c1 = document.getElementById('c1');
//修改后获取方式
const c2 = this.elRef.nativeElement.querySelector('#c1');**
```js
import { Component, ElementRef, OnInit } from '@angular/core';

@Component({
  selector: 'app-XXX',
  templateUrl: './XXX.component.html',
  styleUrls: ['./XXX.component.scss']
})
export class XXXComponent implements OnInit {
  constructor(private elRef : ElementRef) { }
  ngOnInit(): void {
 	//原先获取方式
    const c1 = document.getElementById('c1');
	//修改后获取方式
    const c2 = this.elRef.nativeElement.querySelector('#c1');
	}
```