web-dev-qa-db-ja.com

Observableサブスクリプションを内部に持つ関数から値を返すにはどうすればいいですか？

Observableが存在する関数によって返されるために、Observableから値を抽出する方法を知りません。私はそれから返される値だけを必要とします。

動作する現在のバージョン

function getValueFromObservable() {
    this.store.subscribe(
        (data:any) => {
            console.log(data)
        }
    )
}
getValueFromObservable()

私はこれがうまくいくために、値を返すために機能するために、そしてそれから：

function getValueFromObservable() {
    this.store.subscribe(
        (data:any) => {
            return data
        }
    )
}
console.log(getValueFromObservable())

私はここで何をしていますか？

typescriptangularrxjsrxjs5
57
Teddy

私はこの質問がかなり前にあったことをあなたは今確かに正しい解決策を持っていることを認識しています、しかしこれを探している人のために非同期パターンを保つために約束でそれを解決することをお勧めします。より冗長なバージョンでは、新しいPromiseを作成します。

function getValueFromObservable() {
    return new Promise(resolve=>{
        this.store
         .take(1) //useful if you need the data once and don't want to manually cancel the subscription again
         .subscribe(
            (data:any) => {
                console.log(data;
                resolve(data);
         })
    }
}

受信側では、次のようにして解決するという約束を「待つ」必要があります。

getValueFromObservable()
   .then((data:any)=>{
   //... continue with anything depending on "data" after the Promise has resolved
})

よりスリムな解決策は、代わりにRxJSの.toPromise（）を使うことです。

function getValueFromObservable() {
    return this.store
       .take(1)
       .toPromise()   
}

受信側ももちろん上記と同じです。それが役立つことを願っています！

26
jparg

これはObservableを使用するという厳密には正しい考えではありません

コンポーネントでは、オブジェクトを保持するクラスメンバを宣言する必要があります（コンポーネントで使用する予定のもの）。

export class MyComponent {
  name: string = "";
}

ServiceはObservableを返します。

getValueFromObservable():Observable<string> {
    return this.store.map(res => res.json());
}

Componentは、そこから値を取得できるように準備する必要があります。

OnInit(){
  this.yourServiceName.getValueFromObservable()
    .subscribe(res => this.name = res.name)
}

Observableから変数に値を代入する必要があります。

そしてあなたのテンプレートは変数nameを消費します。

<div> {{ name }} </div>

Observableを使用する別の方法はasyncパイプを使うことです http://briantroncone.com/?p=62

注：それがあなたが求めているものではない場合は、より詳細にあなたの質問を更新してください。

16
Andrei Zhytkevich

返される予定の同じObservableを事前購読する場合は、単に

。行う（）：

function getValueFromObservable() {
    return this.store.do(
        (data:any) => {
            console.log("Line 1: " +data);
        }
    );
}

getValueFromObservable().subscribe(
        (data:any) => {
            console.log("Line 2: " +data)
        }
    );
7
Dudi

問題はデータが観測可能なものの中に捕獲され、私がコンソールにそれを記録することができるだけであるということです。その値とconsole.log、またはそれが存在する関数を呼び出すことによって別のファイルから何でも返したい。

それが放出された時と放出された後に、あなたが観測量の中に「現在価値」ゲッターを探しているように見えます。

SubjectとObservableにはそのようなことはありません。値が発行されると、その値はそのサブスクライバに渡され、Observableがそれとともに処理されます。

最後に発行された値を格納してすぐに新しいサブスクライバに発行するBehaviorSubjectを使用できます。

現在の値を取得するためのgetValue()メソッドもあります。

参考文献：

RxJS BehaviorSubject

RxJS SubjectまたはObservableの現在の値をどうやって取得しますか？

4
A. Alencar

観測可能な値は任意の場所から取得できます。ソースシーケンスは、最初にpush特別なobserverにされています。これはReactive Extensions（RxJS）のSubjectクラスで達成されます。

var subject = new Rx.AsyncSubject();  // store-last-value method

値をobserverに格納します。

subject.next(value); // store value
subject.complete(); // publish only when sequence is completed

他の場所から値を取得するには、次のようにオブザーバを購読します。

subject.subscribe({
  next: (response) => {
      //do stuff. The property name "response" references the value
  }
});

対象は、オブザーバブルとオブザーバーの両方です。他の使用シナリオにはBehaviourSubjectやReplaySubjectなどの Subject types があります。

RxJSをインポートすることを忘れないでください。

var Rx = require('rxjs');
1
Pageii Studio