如何在angular2中获得订阅之外的价值

Question

好吧，我在 component.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>