http.getからの応答を、角型2の型付きオブジェクトの新しいインスタンスにマップする方法

Question

http.getとObservablesを使用して、サービス呼び出しの結果をオブジェクトにマップする方法を理解しようとしていますアンギュラ2.

に私はタイプPersonWithGetPropertyの観測を返すように期待していgetPersonWithGetProperty方法では、このPlunk

を見てみましょう。しかしながら！ 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)); 
    } 
}