質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.52%

  • TypeScript

    341questions

    TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

rxjs(Observable)の値の受け渡し

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 368

ppp0

score 2

 前提・実現したいこと

APIからgetしたデータをAngularで表示させたいと思っています。
ですが、rxjsのObservableの値の受け渡しがよくわからず、実現できません。
ご教示いただければ、幸いです。

 発生している問題・エラーメッセージ

ERROR in src/app/table/table-datasource.ts(89,1): error TS2322: Type 'Subscription' is not assignable to type 'TableItem[]'.
  Property 'includes' is missing in type 'Subscription'.

 該当のソースコード

呼び出し先

public httpGetHuman(apitoken: string): Observable<any> {
  const options = {
    headers: { Authorization: apitoken }
  };
  return this.http.get(this.Url, options);
 }

呼び出し元

export interface TableItem {
  id: number;
  name: string;
}

public getdata() {
  return this.httpGetHuman(apitoken).subscribe(data => this.data['body'] = data);
}

data: TableItem[] = this.getdata();

 直したいところ

dataオブジェクトにHttpGetしたデータを埋め込みたいのですが、
データの参照の仕方がわからず困っています。

 補足情報

HttpのGetリクエストのbodyは以下です。

[
  {id: 1, name: 'aaa'},
  {id: 2, name: 'bbb'},
  {id: 3, name: 'ccc'},
  {id: 4, name: 'ddd'}
]
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • xenbeat

    2018/06/26 15:12

    エラー的にJSの実行時エラーではなくTypeScriptのコンパイル時エラーです。構文が間違っているので、ソースコードを変に省略・加工せずにファイル単位で質問本文に追記ください。ざっと見ただけでも呼び出し先のhttpGetHumanがどこにも出てきません。

    キャンセル

  • xenbeat

    2018/06/26 15:33 編集

    メソッド名だけ修正されたようですが、ソースコードを省略せず全体を追記ください。コンストラクタで設定されているであろう変数がいきなり出てきたり、回答者が色々空気を読まないといけないので負担が大きいです。

    キャンセル

回答 2

0

Angularのチュートリアルですが、Hero Serviceが参考になると思います
https://stackblitz.com/angular/jambljkbpbgg?file=src%2Fapp%2Fhero.ts

AngularJSタグをつけて質問すると、ng-japanの中の人達が拾ってくれるかも

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

subscribe()の戻り値はSubscriptionオブジェクトです。observableから流れてくるデータではありません。
subscribe()のコールバックの中でdata: TableItem[]に対してデータを入れる処理が書かれているので

data: TableItem[] = this.getdata();


この処理は不要で、任意のタイミングで

this.getdata()


を実行するだけでいいはずです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • TypeScript

    341questions

    TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。