Cannot read property ‘getAttribute‘ of null

我在使用echarts时，按官网的例子写的，却出现了这个错误： 具体代码是这样的：

// html <div id="main1" style="width: 600px;height:400px;"></div> //js ngOnInit() : void{ this.getEcharts(); } async getEcharts() { // 基于准备好的dom，初始化echarts实例 const dom: any = await document.getElementById('main1'); console.log(dom); const myChart = echarts.init(dom); // 指定图表的配置项和数据 const option: any = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }, { data: [640, 56, 45, 154, 90, 130, 120], type: 'line' } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); }

寻找错误ing

打印dom，发现为空，what？？？？

修正错误

在angular里可以使用原生js获取dom节点，但有限制，我就错这里了 改正：（先写结果，一会解释）

ngOnInit() : void{ } ngAfterViewInit(): void { this.getEcharts(); } // 方法里的内容不变 async getEcharts() { …… }

解释

这就要解释angular的钩子函数了

ngOnInIt() 是组件和指令初始化完成，并不是真正的DOM加载完成。但也可以在这里获取到DOM节点，但这个节点本身及前辈节点不能有复杂的angualr指令，如ngif、ngModule等指令（在antd的组件里的DOM也获取不到，我试了nz-tabset组件，就获取不到），总结：不建议在这里获取dom节点

ngAfterViewInit()生命周期函数，视图加载完成以后触发的方法 总结：建议把dom操作放在这里

另一种方法：用angular的方法获取节点（不使用原生js了）,具体如下

用Angular提供ViewChild的方法操作dom

@ViewChild('main1') dom: any; constructor() ngOnInit() : void{ this.getEcharts(); } async getEcharts() { // 基于准备好的dom，初始化echarts实例 console.log(this.dom); const myChart = echarts.init(this.dom.nativeElement); // 指定图表的配置项和数据 …… }

把获取的main1节点赋值给了dom 接下来就可以操作dom节点了。可以在ngOnInIt()里，也可以在NgAfterViewInIt()里，建议在NgAfterViewInIt()里操作

ngOnInit() 优于ngAfterViewInit() 先执行,所以接口数据写在ngOnInit() 里面，而在ngAfterViewInit() 里面渲染也没关系