欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Cannot read property ‘getAttribute‘ of null

程序员文章站 2022-03-04 11:11:02
...

我在使用echarts时,按官网的例子写的,却出现了这个错误:
Cannot read property ‘getAttribute‘ of null
具体代码是这样的:

// 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????
Cannot read property ‘getAttribute‘ of null

修正错误

在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() 里面渲染也没关系