Angular2 RxJS 从 map 函数调用 class 函数
Angular2 RxJS calling class function from map function
我是 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
。我尝试的是从 .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
class,但它指的是一个 MapSubscriber
对象。
我不知道是否可以调用 "external" 函数。这可能是一件愚蠢的事情,但我找不到任何相关信息。
不只是传递 function
引用,而是使用 arrow
函数来保留 this
.map((res) => this.extractData(res))
Observable 的 map 函数允许您将引用变量作为第二个参数传递给 this
如何在高阶函数中实际工作。
所以解决方案是
.map(this.extractData,this)
这样,在传递 extractData 函数的同时,您还将当前 class 的 this
执行上下文传递给高阶函数。
它会起作用。
我是 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
。我尝试的是从 .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
class,但它指的是一个 MapSubscriber
对象。
我不知道是否可以调用 "external" 函数。这可能是一件愚蠢的事情,但我找不到任何相关信息。
不只是传递 function
引用,而是使用 arrow
函数来保留 this
.map((res) => this.extractData(res))
Observable 的 map 函数允许您将引用变量作为第二个参数传递给 this
如何在高阶函数中实际工作。
所以解决方案是
.map(this.extractData,this)
这样,在传递 extractData 函数的同时,您还将当前 class 的 this
执行上下文传递给高阶函数。
它会起作用。