Angular2 RxJS 从地图函数调用类函数 [英] Angular2 RxJS calling class function from map function

问题描述

我是 Angular 2 和 Observables 的新手，所以如果我的问题微不足道，我深表歉意.无论如何，我正在尝试使用 RxJS 测试 Angular 2 HTTP 客户端.虽然我让它工作了，但我需要为我目前正在处理的服务添加更多逻辑.基本上，我想要一个映射函数，将我从所连接的 Web 服务接收到的对象转换为我在 Angular 中拥有的模型对象.

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.

这是有效的代码:

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.我尝试的是从 .map 函数正在使用的 extractData 函数中调用另一个函数.

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
}

显然上面的代码不起作用，因为在 extractData 函数中引用了 this，this 不引用 >PersonsService 类，但它指的是一个 MapSubscriber 对象.

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.

推荐答案

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

Instead of just passing the function reference use arrow functions to retain this

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

这篇关于Angular2 RxJS 从地图函数调用类函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！