Node.js 如何等待异步HTTP请求返回Angular 4上的值?
我有一些“卡片”,我想在Angular服务上为他们获取信息,问题是我通过API上的http请求获取这些信息,我想在所有请求完成后返回 卡片.组件.ts 卡片服务 当它运行时,如果它应该有一个整数,则会出现: [对象] 如果我试图将return语句放入subscribe函数中,“cards.component.ts”会给出以下错误: 类型“void”不可分配给类型“Object[]”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,然后在组件中订阅
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 = ...;
});