Angular2 RxJS从map函数调用类函数

时间:2016-05-13 18:17:04

标签: angularjs angular rxjs angular2-services

我是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 = 'http://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。我尝试的是调用extractData函数正在使用的.map函数中的另一个函数。

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
}

显然上面的代码不起作用,因为在this函数中引用了extractDatathis没有引用PersonsService类,但是它指的是一个MapSubscriber对象。

我不知道是否可以调用“外部”功能。这可能是一个愚蠢的事情,但我找不到任何有关此事的信息。

2 个答案:

答案 0 :(得分:19)

而不只是传递function引用使用arrow函数来保留this

.map((res) => this.extractData(res))

答案 1 :(得分:2)

Observable的map函数允许你传递一个引用变量,作为this在高阶函数中实际工作方式的第二个参数。
所以解决方案是        .map(this.extractData,this)
这样,在传递extractData函数时,您还将当前类的this执行上下文传递给高阶函数。 它会起作用。

Observable Doc Reference Link

screenshot of the doc