![](/img/trans.png)
[英]Data returning from api call through service to component is an object and seems to need to be an Array for Angular
[英]Angular returns data from an API call as [Object Object], but undefined in the component
我正在做一個項目,並且遇到了巨大的障礙。
正如我在問題中提到的那樣,我已經構建了dataService,但是我的dataService正確顯示了響應,但是在Component中它未定義。
這是我的data.service.ts文件的代碼
import { Injectable, OnInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import {
Http,
Response,
Request,
RequestOptions,
Headers
} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import { Institution } from './institution';
import 'rxjs/Rx';
const httpOptions = {
headers: new HttpHeaders({'Content-Type': 'application/json'})
};
@Injectable()
export class DataService {
constructor(private http: HttpClient) { }
institutionData: Object;
//private http: Http;
grabInstitutionData(): Observable<Institution[]> {
return this.http
.get(`http://127.0.0.1:8000/courses/api/institution/list/`)
.map((response: Response) => {
console.log(response);
this.institutionData = <Institution[]>response.json();
console.log('this is right' + this.institutionData);
return this.institutionData;
})
.catch(this.handleError);
}
private handleError(error: Response) {
return Observable.throw(error.statusText);
}
}
而我的組件文件代碼:
import { async } from '@angular/core/testing';
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import {Http, Response} from '@angular/http';
import { HttpClient } from '@angular/common/http';
import { Institution } from '../institution';
@Component({
selector: 'app-institutions',
templateUrl: './institutions.component.html',
styleUrls: ['./institutions.component.css']
})
export class InstitutionsComponent implements OnInit {
institutionData: Object;
_InstitutionsArray: Institution[];
constructor(private http: Http, private dataService: DataService) { }
getInstitutions(): void {
this.dataService.grabInstitutionData()
.subscribe(
resultArray => this._InstitutionsArray = resultArray,
error => console.log("Error :: " + error)
);
}
ngOnInit(): void {
this.getInstitutions();
}
}
我知道它與異步函數調用有關,但是我無法確切知道它是什么。
任何和所有幫助將不勝感激。
El-Teezus,不使用map也不使用json()。 當我們使用“地圖”來轉換響應時,在您的代碼中沒有意義
//為我們服務
grabInstitutionData(): Observable<Institution[]> {
return this.http
.get(`http://127.0.0.1:8000/courses/api/institution/list/`)
.do(response:Response)=>{
console.log(response);
this.institutionData = <Institution[]>response;
console.log('this is right' + this.institutionData);
})
.catch(this.handleError);
}
看到我們使用“ do”對響應做“某事”而不更改它。 是的,“ do”是檢查重做是否是預期的重做,還是要緩存結果。 也可以看到我們不需要編寫response.json()。 HttpClient為我們做到了。
在你的組件中
getInstitutions(): void {
this.dataService.grabInstitutionData()
.subscribe(
(resultArray) =>
{
this._InstitutionsArray = resultArray
//here you have the data
console.log(this._Institutionsrray);
},
(error) => console.log("Error :: " + error)
);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.