[英]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.