gpt4 book ai didi

angular - 在 Angular 2 中映射 http 响应时获取 [object Object]

转载 作者:太空狗 更新时间:2023-10-29 18:16:43 26 4
gpt4 key购买 nike

我在 Angular 2 中使用 Observable map 时得到一个 [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,因此您需要删除数据 来自该方法,如果没有响应则返回一个空对象:

private extractData(res: Response) {
let body = res.json();
return body || {};
}

一些提示:

  • 在您的 Service 和 MarketComponent 中,您不需要注入(inject)构造函数中的 MarketViewModel。
  • 您需要在您的组件中声明一个变量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>

我们需要记住,虽然这段代码工作得很好,但我们实际上并没有将响应转换为您的类的实例。如果你想这样做,我建议使用以下链接和一些很好的答案:) How do I cast a JSON object to a typescript class

关于angular - 在 Angular 2 中映射 http 响应时获取 [object Object],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41627548/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com