[英]Getting [object Object] while mapping http response in Angular 2
我在 angular 2 中使用 Observable 地圖時得到一個 [object Object]。
這是來自 API 服務的響應對象。
{
"isSuccess": true,
"message": "Connection Successfull",
"data": [
{
"marketId": 1,
"city": "san",
"cityF": "san",
"name": null,
"nameF": "hello",
"sortOrder": 1,
"isActive": true
},
{
"marketId": 2,
"city": "san",
"cityF": "san",
"name": null,
"nameF": "hello",
"sortOrder": 1,
"isActive": true
},
{
"marketId": 3,
"city": "san",
"cityF": "san",
"name": null,
"nameF": "hello",
"sortOrder": 1,
"isActive": true
},
{
"marketId": 4,
"city": "san",
"cityF": "san",
"name": null,
"nameF": "hello",
"sortOrder": 1,
"isActive": true
}
],
"exceptionErrorMessage": null,
"errorCode": 0,
"successMessage": null
}
這是我創建的用於映射響應的模型。
export class MarketViewModel
{
public isSuccess: boolean;
public message : string;
public successMessage : string;
public exceptionErrorMessage : string;
public errorCode: number;
public data: MarketListObject[];
}
export class MarketListObject
{
public marketId : number;
public city: string;
public cityF : string;
public name : string;
public nameF : string;
public sortOrder : number;
public isActive : boolean;
}
調用 http 並映射響應的服務類。
import { Headers, RequestOptions } from '@angular/http';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { MarketViewModel} from "../ViewModel/Market.ViewModel";
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
@Injectable()
export class DashBoardService {
private MarketUrl = "DashBoard/GetMarketList";
private ResponseData: any;
constructor(private http: Http, private router: Router, private marketModel : MarketViewModel) {}
public GetMarketListCall() :Observable<MarketViewModel> {
return this.http.get(this.MarketUrl).map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response) {
let body = res.json();
console.log("Body Data = "+body.data);
return body.data || { };
}
這是調用 Service.ts 的 Component.ts
import { Component } from '@angular/core';
import { MarketViewModel} from "../ViewModel/Market.ViewModel";
import { DashBoardService} from "../Service/DashBoard.Service";
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'Market-app',
templateUrl: 'DashBoard/MarketListView',
providers: [DashBoardService, MarketViewModel]
})
export class MarketComponent {
constructor(private DashBoardservice: DashBoardService, private marketModel : MarketViewModel) {
}
ngOnInit() {
this.DashBoardservice.GetMarketListCall().subscribe(
data => {this.marketModel = data;
console.log("this"+this.marketModel); },
err => {console.log(err);});
}
}
當我看到控制台時,我收到了[object Object]響應。 我無法弄清楚的錯誤在哪里
您的extractData
有問題,您希望響應原樣與您的MarketViewModel
匹配,因此您需要從該方法中刪除data
,如果沒有響應,還需要返回一個空對象:
private extractData(res: Response) {
let body = res.json();
return body || {};
}
一些提示:
marketModel
才能使用this.marketModel
。ngOnInit
,但沒有在你的組件中實現它在測試您的應用程序時,它有效:
getMarketListCall(): Observable<MarketViewModel>{
return this.http.get('theUrl')
.map(res => res.json()) // or use the 'extractData'
// .catch(this.handleError);
}
您的組件:
marketmodel: MarketViewModel
ngOnInit() {
this.DashBoarservice.GetMarketListCall()
.subscribe(data => {
this.marketModel = data;
},
err => { console.log(err);
});
}
您的觀點,您應該將 html 包裝在 if 語句中,因為您的數據是異步檢索的:
例如:
<div *ngIf="marketModel"> <!-- Here! -->
<h2>MarketModel Message: {{marketModel.message}}</h2>
<div *ngFor="let data of marketModel.data">Id: {{data.marketId}} </div>
</div><br>
我們需要記住,雖然這段代碼工作得很好,但我們實際上並沒有將響應轉換為您的類的實例。 如果您想這樣做,我建議使用以下鏈接並提供一些很好的答案:) 如何將 JSON 對象轉換為打字稿類
你必須改變你的DashBoardService
如下,因為你必須返回MarketListObject
數組作為可觀察的而不是MarketViewModel
:
@Injectable()
export class DashBoardService {
private MarketUrl = "DashBoard/GetMarketList";
private ResponseData: any;
constructor(private http: Http, private router: Router, private marketModel : MarketViewModel) {}
public GetMarketListCall() :Observable<MarketListObject[]> {
return this.http.get(this.MarketUrl).map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response) {
let body = res.json();
console.log("Body Data = "+body.data);
return body.data || [];
}
}
此外,無需將MarketViewModel
作為MarketViewModel
中的提供者MarketComponent
因此從MarketComponent
提供者列表中刪除MarketViewModel
MarketComponent
如下方式更改您的組件。
import { Component } from '@angular/core';
import { DashBoardService} from "../Service/DashBoard.Service";
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'Market-app',
templateUrl: 'DashBoard/MarketListView',
providers: [DashBoardService]
})
export class MarketComponent {
public marketList: any[];
constructor(private dashBoardservice: DashBoardService) {
}
ngOnInit() {
this.dashBoardservice.GetMarketListCall().subscribe((data) => {
this.marketList = data;
console.log("this" + this.marketList);
},(err) => {
console.log(err);
});
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.