如何在Angular2中订阅外部价值

Question

好吧，我已经在constorment.ts文件中创建了一个放置在构造函数内的函数：

constructor(private _visitService: VisitService,) {
      this._visitService.getchartData().subscribe(data => {
          this.fetchedData = data
          console.log("INSIDE SUBSCRIBE", this.fetchedData );
      });
  }

当数据在订阅中使用console.log的订阅括号{}中时，这是可以的。但是，当我将其放在这样的函数中时：

     constructor(
                  private _visitService: VisitService,
                   )
      {
             this.chartData = this.getData(  );

          this._visitService.getchartData().subscribe(data =>
        { this.fetchedData = data
        console.log("INSIDE SUBSCRIBE", this.fetchedData );
        });
      }

    ngOnInit() {

  }

  getData(   ) {
    console.log("INSIDE SUBSCRIBE", this.fetchedData );
    var layoutColors = this._baConfig.get().colors;
    var graphColor = this._baConfig.get().colors.custom.dashboardLineChart;
    return {
      dataProvider:    [
     {
          date: "2012-07-30",
          value:50
        }, {
          date: "2012-07-31",
          value: 18
        }, {
          date: "2012-08-01",
          value: 13
        }, {
          date: "2012-08-02",
          value: 22
        }, {
          date: "2012-08-03",
          value: 23
        },
      ],
      type: 'serial',
      theme: 'blur',
      marginTop: 15,
      marginRight: 15,
      responsive: {
        'enabled': true
      },
      dataDateFormat: 'YYYY-MM-DD',
      categoryField: 'date',
      categoryAxis: {
        parseDates: true,
        gridAlpha: 0,
        minHorizontalGap:100,
        color: layoutColors.defaultText,
        axisColor: layoutColors.defaultText
      },
      valueAxes: [
        {
          minVerticalGap: 50,
          gridAlpha: 0,
          color: layoutColors.defaultText,
          axisColor: layoutColors.defaultText
        }
      ],
      graphs: [
/*        {
          id: 'g0',
          bullet: 'none',
          useLineColorForBulletBorder: true,
          lineColor: colorHelper.hexToRgbA(graphColor, 0.3),
          lineThickness: 1,
          negativeLineColor: layoutColors.danger,
          type: 'smoothedLine',
          valueField: 'value0',
          fillAlphas: 1,
          fillColorsField: 'lineColor'
        },*/
        {
          id: 'g1',
          bullet: 'none',
          useLineColorForBulletBorder: true,
          lineColor: colorHelper.hexToRgbA(graphColor, 0.5),
          lineThickness: 1,
          negativeLineColor: layoutColors.danger,
          type: 'smoothedLine',
          valueField: 'value',
          fillAlphas: 1,
          fillColorsField: 'lineColor'
        }
      ],
      chartCursor: {
        categoryBalloonDateFormat: 'DD MM YYYY',
        categoryBalloonColor: '#4285F4',
        categoryBalloonAlpha: 0.7,
        cursorAlpha: 0,
        valueLineEnabled: true,
        valueLineBalloonEnabled: true,
        valueLineAlpha: 0.5
      },
      export: {
        enabled: true
      },
      pathToImages: "http://cdn.amcharts.com/lib/3/images/",
      chartScrollbar: {
        graph: 'g1',
        gridAlpha:0,
        color:"#888888",
        scrollbarHeight:25,
        backgroundAlpha:0,
        selectedBackgroundAlpha:0.1,
        selectedBackgroundColor:"#888888",
        graphFillAlpha:0,
        autoGridCount:true,
        selectedGraphFillAlpha:0,
        graphLineAlpha:0.2,
        graphLineColor:"#c2c2c2",
        selectedGraphLineColor:"#888888",
        selectedGraphLineAlpha:1
      },
      listeners: [{
        method: function(e) {
          e.chart.valueAxes[0].zoomToValues(30, 70);
        }
      }],
      creditsPosition: 'bottom-right',
      zoomOutButton: {
        backgroundColor: '#fff',
        backgroundAlpha: 0
      },
      zoomOutText: '',
    /*  pathToImages: layoutPaths.images.amChart*/
    };
  }

它显示未定义。是否有一种方法可以使用从其他功能或方法中订阅中提取的值。我真的是新手，所以我遇到了麻烦。我还试图将其传递到另一个变量，并使用该变量访问数据，但也徒劳无功。

Answer 1

添加一个 *ngif =" ChartData"到外包装器中，因此一旦数据可用，图表就会呈现。

<div *ngIf="chartData">
  Chart Data content goest here.
  <h1>{{ chartData.property }}</h1>
</div>