[英]Angular 4, convert http response observable to object observable
I'm new to the concepts of observables and need some help with a conversion. 我是可观察的概念的新手,需要一些转换帮助。
I have a service which returns an Observable<Response>
from a Http request, but I need to convert it do an Observable<PriceTag>
to use it on a DataSource
inside the connect method. 我有一个服务从Http请求返回一个
Observable<Response>
,但我需要转换它做一个Observable<PriceTag>
在connect方法中的DataSource
上使用它。
Is there anyway to do this? 反正有没有这样做?
This is the method from my service: 这是我服务的方法:
getPriceTags(): Observable<Response> {
// Set the request headers
const headers = new Headers({ 'Content-Type': 'application/json' });
// Returns the request observable
return this.http.post(Constants.WEBSERVICE_ADDRESS + "/priceTag", null, {headers: headers});
}
And here is the DataSource class where I need to return it as an Observable<PriceTag>
: 这里是DataSource类,我需要将它作为
Observable<PriceTag>
:
export class PriceTagDataSource extends DataSource<PriceTag> {
constructor (private priceTagService: PriceTagService) {
super();
}
connect(): Observable<PriceTag> {
// Here I retrieve the Observable<Response> from my service
const respObs = this.priceTagService.getPriceTags();
// Now I need to return a Observable<PriceTag>
}
disconnect() {}
}
Here's an example from the response from my request: 以下是我的请求回复的示例:
{
// This object is used to check if the query on the server was sucessful
"query": {
"sucessful": true
},
// These are my PriceTags
"tags": [
{
"id": "1",
"name": "MAIN"
},
{
"id": "2",
"name": "CARD"
}
]
}
As of angular 4.3 this can be done automatically. 从角度4.3开始,这可以自动完成。
Example: 例:
export class SomeService {
constructor(private http: HttpClient) {} // <--- NOTE: HttpClient instead of Http
getSome(): Observable<MyAwesomeObject> {
return this.http.get<MyAwesomeObject>('myUrl');
}
}
So in your case that would be: 所以在你的情况下,这将是:
return this.http.post<PriceTag>(Constants.WEBSERVICE_ADDRESS + "/priceTag", null, {headers: headers});
Again, use the HttpClient
instead of Http
再次,使用
HttpClient
而不是Http
I guess your HTTP Response is a JSON containing a PriceTag? 我猜你的HTTP响应是一个包含PriceTag的JSON? The issue is that you want to create a PriceTag object.
问题是您要创建一个PriceTag对象。 You can just convert the json to a PriceTag by type casting, but then it won't be a real PriceTag object.
您可以通过类型转换将json转换为PriceTag,但它不会是真正的PriceTag对象。
The way we have resolved this is: 我们解决这个问题的方法是:
export class Serializable {
constructor(json?: any) {
if (json) {
Object.assign(this, json);
}
}
}
And then a serializable class: 然后是一个可序列化的类:
export class PriceTag extends Serializable {}
Then, your GetPriceTags function needs to be changed to: 然后,您的GetPriceTags函数需要更改为:
getPriceTags(): Observable<PriceTag> {
// Set the request headers
const headers = new Headers({ 'Content-Type': 'application/json' });
// Returns the request observable
return this.http.post(Constants.WEBSERVICE_ADDRESS + "/priceTag", null, {headers: headers})
.map(res => new PriceTag(res.json()));
}
In the Angular 4+
, It can be done automatically. 在
Angular 4+
,它可以自动完成。 You can change your getPriceTags
method: 您可以更改
getPriceTags
方法:
export class PriceTagService {
constructor(private http: HttpClient) {}
getPriceTags<T>(): Observable<T> {
// Set the request headers
const headers = new Headers({ 'Content-Type': 'application/json' });
// Returns the request observable
return this.http.post<T>(`${Constants.WEBSERVICE_ADDRESS}/priceTag`, null, {headers: headers});
}
}
And your DataSource
class can be: 你的
DataSource
类可以是:
export class PriceTagDataSource extends DataSource<PriceTag> {
constructor (private priceTagService: PriceTagService) {
super();
}
connect(): Observable<PriceTag> {
// Here you can retrieve the Observable<PriceTag> from service and return directly
return this.priceTagService.getPriceTags<PriceTag>();
}
disconnect() {}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.