[英]Angular 4 HTTP Not Returning The JSON body
我的打字稿中有以下方法!
allPowerPlants(onlyActive: boolean = false, page: number = 1): PowerPlant[] {
const params: string = [
`onlyActive=${onlyActive}`,
`page=${page}`
].join('&');
const path = `${this.allPowerPlantsURL}?${params}`;
this.apiService.get(path).map(
powerplants => {
powerplants.map(item => {
if (this.isPowerPlant(item)) {
// make the item an instance of PowerPlant
this.powerPlants.push(item as PowerPlant);
}
});
},
err => {
console.log('oops **** some error happened');
// handle error
});
console.log('powerplants obtained is *****************+ ');
console.log(this.powerPlants);
return this.powerPlants;
}
我的get方法如下所示:
import { Injectable } from '@angular/core';
import { environment } from '../../environments/environment';
import { Headers, Http, Response, URLSearchParams } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
@Injectable()
export class ApiService {
loading: boolean;
data: Object;
constructor(
private http: Http,
) {}
get(path: string, params: URLSearchParams = new URLSearchParams()): Observable<any> {
console.log('sending request to ' + `${environment.api_url}${path}`);
return this.http.get(`${environment.api_url}${path}`, { search: params })
.catch(this.formatErrors)
.map((res: Response) => {
console.log('response as json is ' + res.json());
res.json();
});
}
}
我的isPowerPlant方法如下所示:
isPowerPlant(item: any): item is PowerPlant {
// check for the required properties of PowerPlant here and return true/false.
// example:
console.log('in the static method');
const vvvv = item['maxPower'] && item['minPower'];
console.log(vvvv);
return vvvv;
}
我期待在console.log中看到一些数据('响应为json是'),但奇怪的是它什么都没打印! 请求甚至没有到服务器!
但是,当我将我的allPowerPlants方法更改为不映射get方法时,而是订阅如下:
this.apiService.get(path).subscribe(...)
我从服务器日志中看到正在提供请求时,我可以看到从服务器获取的一些数据。
我想做以下事情:
我希望allPowerPlants返回一个PowerPlants数组,定义如下:
export interface PowerPlant {
powerPlantId: number;
powerPlantName: string;
minPower: number;
maxPower: number;
powerPlantType: string;
rampRateInSeconds?: number;
rampPowerRate?: number;
}
现在因为我的get方法是一个Observable,我看到我的Angular应用程序正在对服务器进行大量的调用,因为从我的服务器日志中可以看到:
[info] application - GET /powerPlants?onlyActive=false&page=1 took 3192ms HTTP status >> 200
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2974ms HTTP status >> 200
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2701ms HTTP status >> 200
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2682ms HTTP status >> 200
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2885ms HTTP status >> 200
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2920ms HTTP status >> 200
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2552ms HTTP status >> 200
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2564ms HTTP status >> 200
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2598ms HTTP status >> 200
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2612ms HTTP status >> 200
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2615ms HTTP status >> 200
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2621ms HTTP status >> 200
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2636ms HTTP status >> 200
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2609ms HTTP status >> 200
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2701ms HTTP status >> 200
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2544ms HTTP status >> 200
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2588ms HTTP status >> 200
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2532ms HTTP status >> 200
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2586ms HTTP status >> 200
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2570ms HTTP status >> 200
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2652ms HTTP status >> 200
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2624ms HTTP status >> 200
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2661ms HTTP status >> 200
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2618ms HTTP status >> 200
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2611ms HTTP status >> 200
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2624ms HTTP status >> 200
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2620ms HTTP status >> 200
这是我的服务器发送的实际数据:
[ {
"powerPlantId" : 1,
"powerPlantName" : "Organization-001",
"minPower" : 20,
"maxPower" : 100,
"powerPlantType" : "OnOffType"
}, {
"powerPlantId" : 2,
"powerPlantName" : "Organization-001",
"minPower" : 100,
"maxPower" : 800,
"rampPowerRate" : 100,
"rampRateInSeconds" : 100,
"powerPlantType" : "RampUpType"
}, {
"powerPlantId" : 3,
"powerPlantName" : "Organization-002",
"minPower" : 200,
"maxPower" : 400,
"rampPowerRate" : 50,
"rampRateInSeconds" : 50,
"powerPlantType" : "RampUpType"
}, {
"powerPlantId" : 4,
"powerPlantName" : "Organization-002",
"minPower" : 400,
"maxPower" : 800,
"powerPlantType" : "OnOffType"
} ]
如何使我的allPowerPlants只调用我的服务器一次,但同时处理get方法的Observable结果?
这就是我如何利用HTML中的数据:
<div class="ui grid posts">
<app-powerplant
*ngFor="let powerPlant of allPowerPlants()"
[powerPlant]="powerPlant">
</app-powerplant>
</div>
以下是从服务器调用数据的代码片段
this.apiService.get(path).map(
powerplants => {
...
}
停在那儿。 没有数据的原因是你没有订阅它! 你应该做这个
this.apiService.get(path).subscribe(
powerplants => {
this.powerPlants = powerplants
//remove the mapping. you can do it in your service.
},
err => {
console.log('oops **** some error happened');
// handle error
});
并在您的服务
get(path: string, params: URLSearchParams = new URLSearchParams()): Observable<any> {
console.log('sending request to ' + `${environment.api_url}${path}`);
return this.http.get(`${environment.api_url}${path}`, { search: params })
.catch(this.formatErrors)
.map((res: Response) => {
<PowerPlant[]> res.json();
});
}
请注意,我的映射可能是错误的,因为您没有显示返回数据的实际值。
希望这可以帮助。
好的,网上有很多关于如何处理http请求的例子,在这里吨...
通常你有一个get方法的服务, 不要使用像GET这样的保留字来调用你的方法 ...在你的情况下将是getAllPowerplants
在您的情况下,API服务看起来很好(方法名称除外)
然后在组件上,你会有这样的东西
this.apiService.getAllPowerplants.subscribe(data => {
console.log(data);
});
并且显然只订阅它一次(ngOnInit是个好地方)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.