我是Angular 2和Observables的新手,所以对我的问题微不足道,我表示歉意.无论如何,我正在尝试使用RxJS测试Angular 2 HTTP客户端.尽管它可以正常工作,但我需要为当前正在使用的服务添加更多逻辑.基本上,我想拥有一个映射功能,将我从连接的Web服务接收到的对象转换为Angular中的模型对象.
这是有效的代码:
import { Injectable } from 'angular2/core'; import { Http, Response } from 'angular2/http'; import { Observable } from 'rxjs/Observable'; import { Person } from '../models/person'; @Injectable() export class PersonsService { constructor(private http: Http) { } private personsUrl = 'localhost/api/persons'; getPersons(): Observable<Person[]> { return this.http.get(this.personsUrl) .map(this.extractData) .catch(this.handleError); } private extractData(res: Response) { if(res.status < 200 || res.status >= 300) { throw new Error('Bad response status ' + res.status); } let body = res.json(); return body.data || {}; } private handleError(error: any) { let errMsg = error.message; return Observable.throw(errMsg); } }使用上面的代码,我没有任何问题.我遇到的问题是我想将从服务中获取的对象映射到Angular中的对象,即Person.我试过的是从.map函数正在使用的extractData函数中调用另一个函数.
private extractData(res: Response) { if(res.status < 200 || res.status >= 300) { throw new Error('Bad response status ' + res.status); } let body = res.json(); // map data function var data = this.mapData(body.data); return data || {}; } private mapData(data: any) { // code to map data }显然,上面的代码不起作用,因为在extractData函数中引用了this时,this并不引用PersonsService类,但是它引用了MapSubscriber对象.
我不知道是否可以调用外部"函数.这可能是愚蠢的事情,但我找不到有关此的任何信息.
解决方案使用 arrow 函数保留this
.map((res) => this.extractData(res))I'm new to Angular 2 and Observables so I apologise if my problem is trivial. Anyway I'm trying to test the Angular 2 HTTP Client using RxJS. Although I got it to work I need to add more logic to the service I'm currently working on. Basically I'd like to have a mapping function to convert the object I receive from the web service I'm connected to, to the model object I have in Angular.
This is the code that works:
import { Injectable } from 'angular2/core'; import { Http, Response } from 'angular2/http'; import { Observable } from 'rxjs/Observable'; import { Person } from '../models/person'; @Injectable() export class PersonsService { constructor(private http: Http) { } private personsUrl = 'localhost/api/persons'; getPersons(): Observable<Person[]> { return this.http.get(this.personsUrl) .map(this.extractData) .catch(this.handleError); } private extractData(res: Response) { if(res.status < 200 || res.status >= 300) { throw new Error('Bad response status ' + res.status); } let body = res.json(); return body.data || {}; } private handleError(error: any) { let errMsg = error.message; return Observable.throw(errMsg); } }With the above code I have no problems whatsoever. The issue I'm having is that I'd like to map the object I'm getting from the service to the one I have in Angular i.e. Person. What I tried is to call another function from the extractData function that's being used by the .map function.
private extractData(res: Response) { if(res.status < 200 || res.status >= 300) { throw new Error('Bad response status ' + res.status); } let body = res.json(); // map data function var data = this.mapData(body.data); return data || {}; } private mapData(data: any) { // code to map data }Obviously the code above doesn't work as when this is referenced inside the extractData function, this does not refer to the PersonsService class, but it refers to a MapSubscriber object.
I don't know if it is possible to call an "external" function. It might be a silly thing but I can't find any information regarding this.
解决方案Instead of just passing the function reference use arrow functions to retain this
.map((res) => this.extractData(res))
更多推荐
Angular2 RxJS从地图函数调用类函数
发布评论