如何在外部订阅Angular2中获得价值 [英] how to get value outside subscribe in angular2

问题描述

好吧，我已经在component.ts文件中创建了一个函数，该函数放置在构造函数中:

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 );
      });
  }

最好在控制台大括号{}中使用数据，例如console.log.但是当我将它放在这样的外部函数中时:

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.

推荐答案

在外包装中添加* ngIf ="chartData"，以便一旦数据可用就将呈现图表.

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>

这篇关于如何在外部订阅Angular2中获得价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！