web-dev-qa-db-ja.com

Angular 6オブザーバブル-.subscribe（）関数からデータを抽出し、他の場所で使用します

私は観察可能なもので頭を壁に打ちつけています。私が見つけることができるドキュメントのほとんどすべては、古いrxjs構文にあります。

監視可能なAPI呼び出しがあります。私はそれを別の場所で呼び出してサブスクライブしています-このGETリクエストからのデータをテーブルに入力しようとしています。

単に_console.log_ my getData関数を使用すると、データではなくサブスクリプションがログに記録されます。 _.subscribe_関数内でconsole.log dataを正常に実行できますが、.subscribe()の外でdataを使用したいと思います。

.subscribe()関数からdataを抽出して他の場所で使用するにはどうすればよいですか？または、dataを使用するには、すべてのロジックを.subscribe()関数内に含める必要がありますか？

_getData2() {
    return this.m_dbService.get('api/myApiPath').subscribe(
        data => (console.log(data)), //This properly logs my data. How to extract `data` out of here and actually use it?
        error => { throw error },
        () => console.log("finished")
    );
}

workbookInit(args){
     var datasource = this.getData2();   // this returns the subscription and doesn't work.
}
_
angularasynchronousrxjsobservablesubscribe
4
Kyle Vassella

getData()からHTTPリクエストを返し、workbookInit関数内でサブスクライブするだけです。

getData2() {
    return this.m_dbService.get('api/myApiPath')
}

workbookInit(args){
    this.getData2().subscribe(
        data => {
           var datasource = data 
        }, 
        error => { throw error },
        () => console.log("finished") 
}
4
Sachila Ranawaka

おそらくやりたいことは、別のObservableにデータを入力して、APIを複数回呼び出す必要なく、プロジェクトの他の場所にアクセスできるようにすることです。

これを行うには、 Subject と呼ばれるもの（この場合はBehaviorSubject）を作成し、API呼び出しが応答を返すときにデータを入力できます。

次に、このデータに別の場所でアクセスするために、データが必要なときにいつでもSubject（それ自体がObservable）を返す「get」関数を作成できます。

次に例を示します。

my-data.service.ts

myData: BehaviorSubject<number> = new BehaviorSubject<number>(0);

callApi() {
    this.dbService.get('apiUrl').subscribe(
        (data) = > this.myData.next(data) // Assuming data is a 'number'
    );
}

getMyData() {
    return this.myData.asObservable();
}

これをコンポーネントで使用するには：

this.myService.getMyData().subscribe(
    (data) => { /* Use the value from myData observable freely */ }
);

または、 Angular async pipe （これは、コード内のオブザーバブルを処理するための非常に便利な方法です）に依存することもできます。

5
Tim Klein

getData2内のObservableを購読しないでください。それを返すそのまま代わりに、次のようにします。

var dataSource;
this.getData2().subscribe(res => dataSource = res);

変数dataSourceは、リクエストが完了すると（非同期で）設定されるため、同じブロックスコープですぐに使用できないことに注意してください。

すぐに使用したい場合は、サブスクリプション内にコードを配置してください。

3
Guerric P

テーブルにデータを提供するオブザーバブルがある場合、subscribe()を使用するのではなく、asyncパイプを使用してhtmlテンプレートでオブザーバブルを直接使用するのが最善の方法です。心配する必要が少なくなり、コードがはるかに簡単になります。

0
edwin