2016-03-29 7 views
2

厳密に静的なコンテンツを使ってAngular 2を弄んだ後、私はHTTP/Observable landに入り、何が来たのか調べました。 ObservablesはPromisesの素晴らしい選択肢ですが、その代替案と比較した場合のメリットは今のところ私にとっては失われます。しかし、今日の午後には困惑している問題が1つあります。Observableを使用しているときに角度2のモデルクラスがロードされていませんか?

Observables(https://angular.io/docs/ts/latest/guide/server-communication.html)を使用してデータをフェッチすると、モデルに対応するクラスがロードされていないようです。これは、プロパティのみが使用されている限り問題ではありませんが、そのクラス内で定義できるメソッドの使用はできません。

Plunker

ngOnInit(){ 

    // NB 
    // Alternate between the two instructions below while checking 
    // the 'Network' tab of your devtool of choice. 

    // Doing this will actually load the 'person.model.ts' file, 
    // and make the methods available to the component and its template 
    this.people[0] = new Person(); 

    // Doing this will NOT load the 'person.model.ts' file, thus 
    // causing any call to a method defined in that class to fail. 
    //this.getPeople(); 
} 

最初の命令が使用されている、方法person.greet()作品:http://plnkr.co/edit/WjEfdOHmHWT2RZVDSkjr?p=preview

アプリコンポーネントでngOnInit()で定義された2つの命令の間に交互にすることによって、問題を具現することができますテンプレート内で補間によって呼び出されたときには問題なく、対応するファイルがフェッチされます。しかし、2番目の命令を使用すると、エラーが発生し、コンソールに記録されます。ところで、私が作ったPlunkerにこのエラーが表示されます。自分のアプリケーションで問題が発生したときは何も得られません。

今や、問題が回避される可能性があります(たとえば、サブスクリプションが開始される前にダミーコールをnew Person()にするなど)。これは本当に不器用です。似たようなものがここに提案されています:https://stackoverflow.com/a/34777339/5751783(私はSOの質問が関連しているかどうかは完全にはわかりませんが)。

これは本当の問題ですか、何か間違っていますか?本当に問題がある場合は、それを防ぐ適切な方法は何でしょうか?

ありがとうございます!

免責事項:Angular2、SystemJS、RxJSまたは他のコンポーネントがフード内で使用されているかどうかはわかりません。 (私がここに来た理由で)当面はangular2というタグを使用しますが、答えに応じてmore(またはangular2を削除)を追加します。

答えて

1

実際、Person[]へのリクエストの結果が出た場合、それは実際にはタイプPersonのオブジェクトに変換されません。あなたがPersonクラスのメソッドを使用することができます

return this.http.get(this._personUrl) 
      .map(res => <Person[]> res.json()) 
      .map(people => { 
       return people.map((person) => { 
       return new Person(person.firstName, person.surname); 
       }); 
      }) 
      .catch(this.handleError); 

この方法:あなたが明示的にリスト内の各要素についてPersonクラスをインスタンス化する必要があり、これを達成するために

。説明のための

+0

ありがとう:

は、より多くの詳細については、この質問を参照してください!これは間違いなく問題を説明するでしょう - 私は ''とタイプキャスティングを間違えました。それは明らかにそうではありません!これは、私はもう少し助けが必要かもしれないと言われています。私はPlunkerで説明した2番目の 'map()'操作を追加しようとしましたが、問題は残ります。多分それほどではありませんが、現時点では機能していません。私はそれを調べ、何か見つけたらもう一度コメントします。理想的には、コンポーネントに追加するものではなく、サービスに含まれるソリューションを探しています。 – phl

+0

あなたは大歓迎です!問題が残っているのはどういう意味ですか?サブスクリプション時に 'Person'型のインスタンスを持つ配列を受け取りますか? –

+0

私の悪い、私はまだ問題がありますが、それは同じではないかもしれません!サービスに 'map()'を追加すると、 'person.model.ts'ファイルがロードされます。これに関して、元の問題は解決されたとみなすことができる。しかし、 'greet()'メソッドが呼ばれても、エラーは発生します。私は、Plunkerを改ざんしてブレークポイントを追加しました。サブスクリプションに達すると、配列には入力されません。エラーは: 'TypeError:l_person0.greetは関数ではありません.'これは恐らくタイピングに関する問題です。 – phl

関連する問題