Cannot read property ‘getAttribute‘ of null
程序员文章站
2022-03-04 11:11:02
...
我在使用echarts时,按官网的例子写的,却出现了这个错误:
具体代码是这样的:
// html
<div id="main" 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()
把获取的main1节点赋值给了dom
接下来就可以操作dom节点了。可以在ngOnInIt()里,也可以在NgAfterViewInIt()里,建议在NgAfterViewInIt()里操作
ngOnInit() 优于ngAfterViewInit() 先执行,所以接口数据写在ngOnInit() 里面,而在ngAfterViewInit() 里面渲染也没关系
推荐阅读
-
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object
-
npm ERR! Cannot read property 'path' of null
-
js报错 Cannot read property 'getAttribute' of null
-
微信小程序报Cannot read property 'setData' of undefined的错误
-
webpack报错Cannot read property 'presetToOptions' of undefined
-
Extjs4---Uncaught TypeError: Cannot read property ‘items’ of undefined
-
JavaScript Uncaught TypeError: Cannot read property 'value' of null
-
Cannot read property 'tap' of undefined
-
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#
-
Property or field ‘XXX‘ cannot be found on null