Как ждать асинхронных HTTP-запросов для возврата значений на Angular 4?

Question

У меня есть несколько «карточек», которые я хочу получить для них информацию в службе Angular, проблема в том, что я получаю эту информацию с помощью HTTP-запросов к API, и я хочу, чтобы возврат произошел после того, как ВСЕ запросы будут выполнены.

cards.component.ts

import {Component} from '@angular/core';

import {CardsService} from './cards.service';

import 'easy-pie-chart/dist/jquery.easypiechart.js';

@Component({
  selector: 'cards',
  templateUrl: './cards.html',
  styleUrls: ['./cards.scss']
})
// TODO: move easypiechart to component
export class Cards {

  public charts: any;

  constructor(private _cardsService: CardsService) {
    this.charts = this._cardsService.getData();
  }
}

cards.service.ts

import {Injectable} from '@angular/core';
import {BaThemeConfigProvider, colorHelper} from '../../../theme';
import { Http, Headers, Response } from '@angular/http';
import {Observable} from "rxjs/Observable";

@Injectable()
export class CardsService {
  _meterCountURL = 'http://localhost:8080/meter/count';
  _cardMeter;
  _cardConsumption;
  constructor(private _baConfig:BaThemeConfigProvider, private http: Http) {
  }

  getData() {
    let pieColor = this._baConfig.get().colors.custom.dashboardPieChart;

    let headers = new Headers({'Content-type': 'application/x-www-form-urlencoded',
                               'Authorization': 'Bearer ' + localStorage.getItem('id_token')});

    Observable.forkJoin(
      this.http.get(this._meterCountURL, {headers: headers}).map((response) => {response.json()['data'];}),
      this.http.get(this._meterCountURL, {headers: headers}).map((response) => {response.json()['data'];})
    ).subscribe(
      data => {
        this._cardMeter = data[0];
        this._cardConsumption = data[1];
      },
      error => console.log(error)
    );

    return [
        color: pieColor,
        description: 'Consumo do mês atual',
        stats: 0 || this._cardConsumption,
        icon: 'ion-flash',
      }, {
        color: pieColor,
        description: 'Número de unidades ativas',
        stats: 0 || this._cardMeter,
        icon: 'ion-ios-speedometer',
      }
    ];
  }
}

При запуске, где оно должно иметь целое число, появляется:

[объект Object].

Если я попытаюсь поместить инструкцию возврата ВНУТРИ функции подписки, то в файле cards.component.ts появится следующая ошибка:

Типу 'void' нельзя присвоить типу 'Object []'.

Как я могу вернуть информацию о карте после правильного завершения запросов http?

Answer 1

Вы должны возвращать наблюдаемое в вашем getData() методе, а затем подписаться на свой компонент.Таким образом, компонент знает, когда завершается наблюдаемое (в методе подписки).

// card.service.ts
getData() {
    return Observable.forkJoin(...);
}

// cards.component.ts
this._cardsService.getData().subscribe(data => {
    this.charts = ...;
});