web-dev-qa-db-ja.com

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

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

これを見てください Plunk

メソッドgetPersonWithGetPropertyでは、PersonWithGetProperty型のObservableを返すことを期待しています。しかしながら！プロパティ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()));
    }
}
typescriptangularrxjshttp-getobservable
16
Magnus Wallström

問題は、解析された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));
    }
}

編集

これが機能するには、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))
);
26
paulpdaniels