angular5应用初始化后无法使用amchart属性

Question

我正在尝试在amchart的帮助下在angular5应用中实现量规图。

app.component.ts

ngOnInit() {
    this.chart = this.AmCharts.makeChart("chartdiv", {
        "type": "gauge",
        "theme": "light",
        "dataProvider": [],
        "axes": [ {
          "axisColor": "transparent",
          "color":"#fff",
          "endValue": 7,
          "gridInside": true,
          "inside": true,
          "radius": "100%",
          "valueInterval": 1,
          "tickColor": "#fff",
          "pivotRadius":"0%",
          "id":"axes1",
          "topText":"RPM",
          "topTextYOffset":-20,
          "topTextColor":"#fff", 
          "bottomText":"0 km/h",
          "bottomTextYOffset":-3,
          "bottomTextColor":"#fff", 
          "minorTickLength":16,
          "tickLength":22,
          "tickThickness":2,
          "labelOffset":5,
          "bands":[{
                "color": "#ff0000",
                "endValue": 7,
             "innerRadius": "87%",
                "startValue": 5
            },
            {
              "alpha":1,
              "color":"#ffffff",
              "startValue": 0,
              "endValue": 13,
              "radius": "44%",
              "innerRadius": "7%",
            }        
          ]
        }, {
          "axisColor": "#fff",
          "color":"black",
          "axisThickness": 3,
          "endValue": 140,
          "radius": "45%",
          "valueInterval": 20,
          "tickColor": "black",
          "axisAlpha":"0",
          "bottomText":"km/h",
          "bottomTextYOffset":-15,
          "bottomTextColor":"black", 
          "labelOffset":2,
          "tickThickness":1.2,
           "bands":[
            {
              "endValue": 0,
              "innerRadius": "97%",
              "radius": "230%",
              "gradientRatio": [255,255,1],
              "startValue": -0.4
            },
            {
              "endValue": 0,
              "innerRadius": "97%",
              "radius": "230%",
              "gradientRatio": [0.5, 0, 1.0],
              "startValue": 0
            },

            {
              "alpha":1,
              "color": "#ff0000",
              "endValue": 140,
              "innerRadius": "83%",
              "startValue": 100,
              "radius":"100%"
            }
          ]
        } ],
        "arrows": [ {
          "nailRadius": 10,
          "nailAlpha": 1,
          "nailColor": "black",
          "innerRadius":"0" ,
          "radius": "0"
        }, {
            "color": "#ff0000",
          "innerRadius": "7%",
          "radius": "40%",
          "startWidth": 3
        }, {
            "color": "#ff0000",
          "innerRadius": "44%",
          "nailRadius": "0",
          "radius": "90%",
           "startWidth": 8
        }
       ],
        "export": {
          "enabled": true
        }
      });  

  }

  ngAfterViewInit {
     setTimeout(() => {
        this.clutchBtn = true;
        this.gear();
        const digitalText = interval(180);
        let digitalSpeedlimit = 0;
        this.digitalSpeed = digitalText.subscribe(() => {
         let currentSpeed = Math.floor((20 + (this.speedNeedle - 1) * 100 / 5));
         // console.log('current speed',currentSpeed);
         // console.log('digitalSpeed',currentSpeed);
         if (currentSpeed >= 140) {
           this.chart.axes[0].setBottomText(140 + ' km/h');
         }
         else if (digitalSpeedlimit > currentSpeed) {
           this.chart.axes[0].setBottomText(currentSpeed + ' km/h');
         }
         else {
          digitalSpeedlimit +=1; 
          this.chart.axes[0].setBottomText(digitalSpeedlimit + ' km/h');
         }
       }) 
      },3000)  
  }

我想在应用程序的开头更改图表属性，因为我在afterViewInit生命周期中调用了“ gear（）”来更改图表箭头值。但是，当我尝试在开始时无法访问图表属性访问“ onint”或“ afterviewinit”生命周期内的图表，它显示以下错误

ERROR TypeError: _this.chart.arrows[2].setValue is not a function

但是如果我在单击按钮时调用的函数中放置了相同的代码，则该代码也可以正常工作。如果在setTimeout（）中放置了该代码，则该代码也可以工作。 在应用程序启动时，是否有更好的解决方案来访问amchart属性。