Angular4でHTTP通信(this.http.get(url))で取得したresponseがundefinedになる
Angular4でHTTP通信(this.http.get(url))で取得したresponseがundefinedになってしまいます。
以下ソースにログを埋め込んでみたのですが、
キャストの仕方が正しくないのでしょうか?
●getTest test: undefined
◎箇所でエラーが発生してしまいます。
ERROR Error: Uncaught (in promise): TypeError: Cannot read property '0' of undefined
TypeError: Cannot read property '0' of undefined
▲<Test[]>response.json() :[object Object]
▲response.json() :[object Object]
▲response.json().data :undefined
▲response.json().data ret :undefined
◇test.ts
export class Test {
constructor(
private Time: string,
private Id: number,
private TestData: {
Mode: number,
Status: number,
Flag: boolean
}) {
}
}
◇サービス呼び出しコンポーネント
private getTest(): void {
this.httpService.requestGet(url)
.then(test => {
console.log('getTest test:', test);●
var data: Test = test[0] as Test;◎
console.log('getTest data:', test[0]);
});
}
◇http.service.ts
import { Injectable } from '@angular/core';
import { Headers, RequestOptions, Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import { Test } from './test';
@Injectable()
export class HttpService {
constructor(private http: Http) { }
requestGet(url: string): Promise<Test[]> {
return this.http.get(url)
.toPromise()
.then(response => {
console.log('response :' + response);▲
console.log(' <Test[]>response.json() :' + <Test[]>response.json());▲
console.log('response.json() :' + response.json());▲
console.log('response.json().data :' + response.json().data);▲
var ret = response.json().data as Test[];
console.log('response.json().data ret :' + ret);▲
return ret;
})
// .then(response => response.json().data as Test[]) もともとはこのソースでしたが、エラーになるので上記でログを埋め込みました。
}
}
デベロッパーツールでResponseをみるとWEB APIの応答として以下ががえっていました。
[{ "TestData" : { "Flag" : true , "Status" : 1.0 , "Mode" : 0.0 } , "Time" : { "$date" : "2017-10-11T06:36:40.000Z"} , "Id" : 1.0}]
また、疑似的にHTTP確認をInMemoryWebApiModuleで行った場合は問題なく取得できていました。
https://github.com/angular/in-memory-web-api
◇in-memory-data.service.ts
import { InMemoryDbService } from 'angular-in-memory-web-api';
export class InMemoryDataService implements InMemoryDbService {
createDb() {
const test = [
{
Time: '1474958200000', Id: 0,
TestData: {
Mode: 1, Status: 0, Flag: true
},
},
{
Time: '1474958200000', Id: 1,
TestData: {
Mode: 1, Status: 0, Flag: true
},
},
];
return {
'Test': test
};
}
}