Angular2 RxJS从地图函数调用类函数

本文介绍了Angular2 RxJS从地图函数调用类函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我是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))