how to get value outside subscribe in angular2

问题

Well, I have created a function inside the component.ts file which is placed inside the constructor:

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

It is fine when the data is to be used within the subscribe curly brackets {} like the console.log did. but when i put it in a function outside like this:

     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*/
    };
  }

It displays undefined. Is there a way to use a value extracted from subscribe inside other functions or methods. I am really new to it so i am having trouble. I also tried to pass it to another variable and use that variable to access the data but it was in vain too.

回答1:

Add a *ngIf="chartData" to the outer wrapper so the chart will be rendered once the data is available.

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

来源：https://stackoverflow.com/questions/49608661/how-to-get-value-outside-subscribe-in-angular2