如何将来自 http.get 的响应映射到 Angular 2 中类型对象的新实例 [英] How to map a response from http.get to a new instance of a typed object in Angular 2

问题描述

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

I'm trying to get an understanding in how to map the result from a service call to an object using http.get and Observables in Angular 2.

看看这个 Plunk

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

In the method getPersonWithGetProperty I'm expecting to return an Observable of type PersonWithGetProperty. However! I can't access the property fullName. I guess that I would have to create a new instance of the class PersonWithGetProperty and map the response to this new object using the class constructor. But how do you do that in the method 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()));
    }
}

推荐答案

问题是您强制解析的 json 表现得像类.

The problem is that you are coercing the parsed json to behave like the class.

应用 实际上并不是创建 PersonWithGetProperty 的新实例，它只是告诉编译器闭嘴，因为你知道你在做什么.如果您想实际创建一个实例 PersonWithGetProperty，您需要使用 new 构造它.

Applying the <PersonWithGetProperty> isn't actually creating a new instance of PersonWithGetProperty it is just telling the compiler to shut up because you know what you are doing. If you want to actually create an instance PersonWithGetProperty you need to construct it with new.

幸运的是，您已经完成了一半，只需在解析输出后添加另一个map:

Fortunately you are already half way there, just add another map after you have parsed the output:

@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:

For this to work you will need to make sure you are using for RxJS 5:

import 'rxjs/add/operator/map'

如果你想要未来的安全，你应该使用在更高版本的 RxJS 5 中引入的 pipe 语法

If you want future safety you should be using the pipe syntax introduced in later versions of 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))
);

这篇关于如何将来自 http.get 的响应映射到 Angular 2 中类型对象的新实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！