Как сопоставить ответ от http.get к новому экземпляру типизированного объекта в Angular 2

Question

Я пытаюсь понять, как сопоставить результат вызова службы с объектом с помощью http.get и Observables в угловом 2.

Взгляните на этой Plunk

в методе getPersonWithGetProperty я ожидал, чтобы вернуться к заметному типа PersonWithGetProperty. Однако! Я не могу получить доступ к свойству 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)); 
    } 
}