如何将http.get的响应映射到Angular 2中类型化对象的新实例[duplicate]

Question

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

看看这个普朗克

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

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执行类的行为。

应用

幸运的是，您已经完成了一半，只需在解析输出后添加另一个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更高版本中引入的管道语法

// 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))
);