web-dev-qa-db-ja.com

Angular 2 JSONオブジェクトをangularクラスに解析する

私はAngular2の入門ドキュメントに従って、独自のアプリを開発しました。ローカルファイルからJSONオブジェクトを取得し、angular2テンプレートに表示することに成功しました。ただし、現在は、JSONファイル内のオブジェクトの構造と正確に一致するangularクラスに依存しています。

最終的に、「@ id」などのプロパティ名を持つJSON-LDで動作するアプリが必要になります。私はいくつかのグーグルをしましたが、RxJSには私が探している機能があるかもしれませんが、いくつかのJSONデータからangular2クラスへの自動バインディングをどこから開始し、代わりに見ることができるのかわかりませんJSONで「@id」とラベル付けされたものを作成し、SomeClass.idの値を設定します

Personクラスの配列を自動的に生成する現在のコード:

getPeople(){
    return this._http.get(this._peopleUrl)
        .map(response => <Person[]> response.json().data)
        .do(data => console.log(data)) //debug to console
        .catch(this.handleError);
} 

このようなJSONの場合:

[
 {
  "id":"1",
  "name":"tessa"
 },
 {
  "id":"2",
  "name":"jacob"
 }
]

しかし、次のようなJSONでは明らかに失敗します。

[
 {
  "@id":"1",
  "name":"tessa"
 },
 {
  "@id":"2",
  "name":"jacob"
 }
]

私のクラスはシンプルです(現時点では:-))

export class Person {
  constructor(
    public id:number,
    public name:string,
  ){}
}

誰かが複雑な/トリッキーなjsonをangular2のクラスにマッピングするいくつかのドキュメント/例について正しい方向に私を指すことができますか?

25
zanther

ここで与えられた答えのオプション4で答えを見つけました: JSONオブジェクトでTypeScriptオブジェクトを初期化する方法

誰かがこのページにアクセスして同じものを探しているなら、これが役立つことを願っています!

11
zanther