Question

我试图了解如何使用Angular 2中的http.get和Observables将服务调用的结果映射到对象。

看看这个Plunk

在方法getPersonWithGetProperty中，我希望返回一个类型为PersonWithGetProperty的Observable。然而！我无法访问属性fullName。我想我必须创建PersonWithGetProperty类的新实例，并使用类构造函数将响应映射到这个新对象。但是你如何在getPersonWithGetProperty方法中做到这一点？

import {Injectable} from '@angular/core';
import {Http, Response} from '@angular/http';
import {Observable} from 'rxjs/Rx';

export class PersonWithGetProperty {
  constructor(public firstName: string, public lastName: string){}

  get fullName(): string {
    return this.firstName + ' ' + this.lastName;
  }
}

@Injectable()
export class PersonService {
    constructor(private http: Http) {
    }

    getPersonWithGetProperty(): Observable<PersonWithGetProperty> {
        return this.http.get('data/person.json')
         .map((response: Response) => <PersonWithGetProperty>(response.json()));
    }
}

Answer 1

问题是你正在强制解析的json表现得像这个类。

应用<PersonWithGetProperty>实际上并没有创建PersonWithGetProperty的新实例，它只是告诉编译器关闭，因为你知道你在做什么。如果您想要实际创建实例PersonWithGetProperty，则需要使用new构建它。

幸运的是，你已经到了一半，只需在解析输出后添加另一个map：

@Injectable()
export class PersonService {
    constructor(private http: Http) {
    }

    getPersonWithGetProperty(): Observable<PersonWithGetProperty> {
        return this.http.get('data/person.json')
         .map((response: Response) => response.json())
         .map(({firstName, lastName}) => new PersonWithGetProperty(firstName, lastName));
    }
}

修改

为此，您需要确保使用RxJS 5：

import 'rxjs/add/operator/map'

如果您希望将来安全，您应该使用RxJS 5的更高版本中引入的pipe语法

// Either import {map} from 'rxjs/operators' return this.http.get('data/person.json').pipe( map((response: Response) => response.json()), map(({firstName, lastName}) => new PersonWithGetProperty(firstName, lastName)) );

如何将响应从http.get映射到Angular 2

1 个答案: