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

Question

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

看看这个Plunk

在 getPersonWithGetProperty 方法中，我希望 return 一个 PersonWithGetProperty 类型的 Observable。然而！我无法访问属性全名。我想我必须创建 class PersonWithGetProperty 的新实例，并使用 class 构造函数将响应映射到这个新对象。但是如何在方法 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 表现得像 class。

应用 <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

How to map a response from http.get to a new instance of a typed object in Angular 2

http-get

observable

rxjs

typescript

angular