Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/node.js/36.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Node.js 如何等待异步HTTP请求返回Angular 4上的值?_Node.js_Angular_Rest_Typescript_Asynchronous - Fatal编程技术网

Node.js 如何等待异步HTTP请求返回Angular 4上的值?

Node.js 如何等待异步HTTP请求返回Angular 4上的值?,node.js,angular,rest,typescript,asynchronous,Node.js,Angular,Rest,Typescript,Asynchronous,我有一些“卡片”,我想在Angular服务上为他们获取信息,问题是我通过API上的http请求获取这些信息,我想在所有请求完成后返回 卡片.组件.ts 卡片服务 当它运行时,如果它应该有一个整数,则会出现: [对象] 如果我试图将return语句放入subscribe函数中,“cards.component.ts”会给出以下错误: 类型“void”不可分配给类型“Object[]” http请求正确完成后,如何返回卡信息?您应该在getData()方法中返回observable,然后在组件中订阅

我有一些“卡片”,我想在Angular服务上为他们获取信息,问题是我通过API上的http请求获取这些信息,我想在所有请求完成后返回

卡片.组件.ts 卡片服务 当它运行时,如果它应该有一个整数,则会出现:

[对象]

如果我试图将return语句放入subscribe函数中,“cards.component.ts”会给出以下错误:

类型“void”不可分配给类型“Object[]”


http请求正确完成后,如何返回卡信息?

您应该在
getData()
方法中返回observable,然后在组件中订阅。通过这种方式,组件知道可观察对象何时完成(在subscribe方法中)

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();
  }
}
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',
      }
    ];
  }
}
// card.service.ts
getData() {
    return Observable.forkJoin(...);
}

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