在amCharts Angular中的createChild上找不到html容器

如何解决在amCharts Angular中的createChild上找不到html容器

在这里，当我在同一页面中时，它会加载图表。但是当我单击另一个页面并再次进入此页面时，该图表未加载，并且显示为 html容器未找到 在createChild

但是，如果我再次重新加载，则会显示相同的页面图表。

这是我的component.ts文件。

constructor(private titleService: Title,private zone: NgZone) {
}

ngOnInit() {
    this.zone.runOutsideAngular(() => {

          this.drawingChart();
    });
  }

drawingChart() {
    am4core.useTheme(am4themesAnimated);
    const container = am4core.create('div1',am4core.Container);
    container.width = am4core.percent(100);
    container.height = am4core.percent(100);
    const chart = container.createChild(am4charts.XYChart);
    chart.padding(0,0);

    chart.data = [
      {
        date: '2012-07-27',value: 13
      },{
        date: '2012-12-28',value: 50
      },{
        date: '2012-12-29',value: 51
      },{
        date: '2013-01-30',value: 81
      }];
    chart.colors.list = [
      am4core.color('rgba(4,69,142,1)'),];

    // Create axes
    const dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

    valueAxis.renderer.grid.template.disabled = true;
    valueAxis.renderer.labels.template.disabled = true;
    dateAxis.renderer.grid.template.disabled = true;
    dateAxis.renderer.labels.template.disabled = true;

// Create series
    const series = chart.series.push(new am4charts.LineSeries());
    series.dataFields.valueY = 'value';
    series.dataFields.dateX = 'date';
    series.tooltipText = '{value';
    series.fillOpacity = 1;
    series.strokeWidth = 2;
    series.minBulletDistance = 15;
  }

这是我的html文件

<div class="col-10 col-sm-3-2 col-md-3-2 col-lg-7-6">
  <div class="l-content-wrapper ">
    <div class="a-title">
      <div class="a-title-content">
        <div class="a-title-content-main">Chart</div>
      </div>
    </div>
    <div id="div1" class="graph_area graph_area__500">
    </div>
  </div>
</div>

我在这里找不到原因

解决方法

当您执行 ngOnInit（）中的代码时，直到该时间之前，您的html均未呈现，因此当您要访问 div1 时，它将变得不确定。 / p>

因此，请尝试在 ngAfterViewInit（）中移动代码。这可能应该可以解决您的问题。 如果不是这样的话，您可以尝试在其中添加一些超时，以便在那之前渲染div。

请参考以下代码：

        ngOnInit() {
           
          }
        ngAfterViewInit(){
           this.getDiv()
       }
    getDiv(){
      if(!this.div){
        this.div = document.getElementById("div1");
        if(!this.div){
setTimeout(()=>{
         this.getDiv()
          },200)
          return
         }} 
        this.drawingChart();
   }