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

Question

在这里，当我在同一页面时，它会加载图表。但是当我单击另一个页面并再次来到此页面时，图表没有加载，它显示为 html container not found 在 createChild 处

但是如果我再次重新加载相同的页面图表会出现。

这是我的 component.ts 文件。

constructor( 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, 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)'),
    ];

    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;

    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>

我在这里找不到原因

Answer 1

当您在 ngOnInit() 中的代码被执行时，直到那时您的 html 都不会呈现，所以当您想要访问 div1 时，它会变得未定义。

所以尝试将您的代码移动到 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();
   }