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