rxjs（Observable）の値の受け渡し

Question

前提・実現したいこと

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'}
]

Comments

[xenbeat]

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

[xenbeat]

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

[teikoku-penguin]

xxx.component.html xxx.component.ts xxx.component.css など関係してくる部分ファイル名込ですべて記載して下さい。回答に必要な情報が足りません。

Answer 1

発生しているエラーは型エラーです

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

ここでTableItem[]型にSubscriptionオブジェクトを代入しようとしているために発生しているようです。
他の方も言われているようにsubscribe()の中でthis.dataに値を代入する必要があります。

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

Answer 2

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

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

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

this.getdata()

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

Answer 3

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

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