在Angular 2中映射http响应时获取[object Object] [英] Getting [object Object] while mapping http response in Angular 2
问题描述
我在 angular 2 中使用 Observable 地图时得到一个 [object Object].
I am getting an [object Object] while using Observable map in angular 2.
这是来自 API 服务的响应对象.
Here is the response object from the API service.
{
"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
}
这是我创建的用于映射响应的模型.
Here is the model I have created to map with the response.
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并映射响应的服务类.
Service class to call the http and map the response.
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
Here is the Component.ts which is calling Service.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] 响应.我想不通的错误在哪里
When I see to the console I am getting [object Object] response. Where is the mistake I am not able to figure it out
推荐答案
你必须改变你的 DashBoardService
如下,因为你必须返回 MarketListObject
数组作为可观察的而不是MarketViewModel
:
You have to change your DashBoardService
as below as you are have to return MarketListObject
array as observable not 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
作为供应商传递给 MarketComponent
,因此从 MarketComponent
供应商列表中删除 MarketViewModel
并更改您的组件如下.
Also there is no need to pass MarketViewModel
as providers inside MarketComponent
so remove MarketViewModel
from MarketComponent
providers list and change your component as below .
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);
});
}
}
这篇关于在Angular 2中映射http响应时获取[object Object]的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!