2016-04-01 4 views
4

Webサービスから返されたjsonオブジェクトの配列をAngular 2アプリケーションの正しい型付けされたオブジェクト配列にマップする方法を理解できません。角2の公式の例:強く型付けされたjsonオブジェクト配列のマッピングのバグ

アンギュラ2の公式の例のplunkerに見られるように、期待されるオブジェクトはヒーロータイプではなく、オブジェクトタイプであり、ヒーロー:HeroListComponentのHeroメンバーは実際にはObject []です。あなたは、配列は強く型付けされていないコンソールで見ることができます:

http://plnkr.co/edit/Qa22yzPh3JWI8lNZ99Ik?p=preview

私は(余分にconsole.logを追加しました)あなたは私たちがヒーローを持っていないブラウザのコンソールで見ることができる、ヒーローのコマンドを追加するために呼び出します[]、オブジェクト[]。

this.http.get(this._heroesUrl) 
      .map(res => <Hero[]> res.json().data) 
      .catch(this.handleError); 

を、私たちは[] []の代わりにヒーローのオブジェクトを取得します:

ので、どうやらここでの変換は機能しません。

正しくタイプされたオブジェクトにjsonをマップする方法についてのアイデアはありますか?

さらに詳しい情報: https://angular.io/docs/ts/latest/guide/server-communication.html

+3

は変換できません。これは[タイプアサーション](https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md#4.16)です。私には、このタイプのアサーションを行うのは悪い考えです。 .json()から得られるものは、確かにヒーローインスタンスの配列ではありません。英雄はただのフィールドしか持っていないので、ここはあまり重要ではありません。しかし、それがメソッドを持っていれば、例えば、それらを呼び出すことはできません。英雄はクラスではなく、IMOでなければなりません。 –

+0

あなたの答えをありがとう!はい、私は、あなたが言ったようにメソッドが動作しないことを観察し、このスレッドを開始しました:) これはインターフェイスであるべきだと言うなら..これについての良い例は分かりますか?パブリックメソッドを持つモデルオブジェクトを持ち、web APIから来るjsonでそれらを埋め込むための最良の方法は? つまり、自動マッパーはありませんか?ネストされたオブジェクトの場合、手動マッピングを行うのは本当に負担になります。 興味深いことに、この基本的なケースの良い例が見つかりませんでした...ウェブAPIから来るjsonデータでtypescriptクラスからインスタンス化されたオブジェクトを生成するには –

+0

また、インターフェイスを別のオブジェクトのコンストラクタに渡して、それ自体を初期化し、テンプレートから呼び出す必要があるパブリックメソッドを公開する必要がありますか? おそらく私のアプローチは間違っています...ありがとう! –

答えて

3

お使いのブラウザはJavaScriptが、おそらくES5ではなく、活字を実行しています。 TypeScriptでは配列に型定義を与えることができますが、JavaScriptでは配列はオブジェクトの配列です。あなたはそこに何かを置くことができ、それはタイプされていません。

ES6にはtyped arraysがありますが、実際には配列ではなくバイナリデータを処理するオブジェクトです。

TypeScriptの表記法()は、オブジェクト配列が、Heroオブジェクトまたは互換性のあるオブジェクトのみを含んでいるかのように使用されているかどうかをコンパイラがチェックするためのものです。実行時には強制されず、コードは発行されません。上記のリンク内の重複問題に見られるように

+0

お返事ありがとうございます。だから、もし私がHeroクラスにgetNameSpecial()のようなカスタム関数を追加し、それをテンプレートから呼び出すと、HeroがWebサービスの結果からマップされていれば、現在動作しません。(Heroでは実際にはあなたが言ったようにObjectです) TypeScriptはプロトタイプに正しいメソッドを追加し、定義されたメンバ関数をプロトタイプに追加したHero型のクラスがあるように振る舞いませんか? jsonからマップされたオブジェクトのHero typescriptクラスで定義されているメソッドを参照することを期待しています...あなたはどう思いますか?ありがとう!!! –

+1

@BeriBenerいいえ、タイプスクリプトはそれのような魔法を何もしません。それを処理するのはAngularの責任です。型アサーションは、有効な 'Hero'型オブジェクトであると想定されるだけです。そうでない可能性があり、そのためにエラーメッセージが表示されません。オブジェクトが使用され、フィールドがない場合にのみ、オブジェクトが使用されます。 –

3

Angular 2 observable doesn't 'map' to model

は、JSONオブジェクトから独自のtypescriptですクラスへの自動マッピングは依然として手作業のプロセスである....

は、私は本当に活字体は賢いだろうと思いましたmap()呼び出しの終わりにHeroオブジェクトを取得するような方法で、十分に透明化するのに十分です。

、コールの終了時に[]ヒーローを取得する簡単な方法があるはず:(。)(RES => res.jsonデータ) .MAP

関連する問題