Как получить ценность вне подписки в angular2

Что ж, я создал функцию внутри файла component.ts, который помещается внутри конструктора:

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

Это нормально, когда данные должны использоваться в фигурных скобках подписки {}, как это сделал console.info. но когда я помещаю его в функцию снаружи, например:

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


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

      }


    ngOnInit() {


  }


  getData(   ) {
    console.info("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*/
    };
  }

Он отображается как неопределенный. Есть ли способ использовать значение, извлеченное из подписки, внутри других функций или методов. Я действительно новичок в этом, поэтому у меня проблемы. Я также пытался передать его другой переменной и использовать эту переменную для доступа к данным, но это тоже было напрасно.

Скорее всего, вы вызываете getData() до того, как сработает подписка, где вызывается эта функция?

bugs 02.04.2018 11:35

вызвать getData перед подпиской или внутри подписки? Функция getData используется поверх `this.chartData = this.getData (); `который далее помещается в html` <ba-am-chart baAmChartClass = "dashboard-line-chart" [baAmChartConfiguration] = "chartData" (onChartReady) = "initChart ($ event)"> </ ba-am-chart > `.

Atul Stha 02.04.2018 11:45

Не могли бы вы изменить OP, включив в него полный HTML-файл?

bugs 02.04.2018 11:47

ну вот и весь HTML. Это дочернее представление, состоящее только из диаграммы, которая затем объединяется с основными заголовками и всем остальным.

Atul Stha 02.04.2018 11:52

Где эта линия? this.chartData = this.getData( )

bugs 02.04.2018 12:03

Мне очень жаль, что я допустил ошибку в коде. Я исправил это прямо сейчас, он находится внутри конструктора.

Atul Stha 03.04.2018 12:46
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
6
392
1

Ответы 1

Добавьте * ngIf = "chartData" во внешнюю оболочку, чтобы диаграмма отображалась, как только данные станут доступны.

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

Другие вопросы по теме