Angular2 observablesをマージする

Question

いくつかのオブザーバブルを取得するのに問題があります。私は2つの 観測点を一緒に素敵な場所に置くことはできません。彼らは自分自身でうまく動作しますが、私は に両方の値が必要です。

db.glass.subscribe((glass: GlassData[]): void => { 
    console.log(glass); // This prints 
}); 

db.cassette_designs.subscribe((cassettes: CassetteData[]): void => { 
    console.log(cassettes): // This prints 
}); 

観測とそのすべて熟知していない、私が試した最初のものは、他の内部 ネスティング1だったが、内側のものは何もしていないようです。

db.glass.subscribe((glass: GlassData[]): void => { 
    console.log(glass); // This prints 

    db.cassette_designs.subscribe((cassettes: CassetteData[]): void => { 
    console.log(cassettes): // This doesn't 
    }); 
}); 

これはので、私はそこに観測を組み合わせること 良い方法だった、それは少数がある判明かどうかを確認するためにGoogleで検索されるビット愚かに思えました。私は zipとforkJoinを試しました。彼らは私がやりたいものの中で最も好きだったと思っていましたが、 はどちらもうまくいきませんでした。

Observable.zip(db.cassette_designs, db.glass, (cassettes: CassetteData[], glass: GlassData[]): void => { 
    console.log(cassettes); // doesn't print 
    console.log(glass ); // doesn't print 
}); 

Observable.forkJoin([ db.cassette_designs, db.glass ]).subscribe((data: any): void => { 
    console.log(data); // doesn't print 
}); 

それは私が、私はいくつかの時点で警告やエラーのいくつかの並べ替えを得るだろうと思っているだろう 私が正しく関数を呼び出していないよほど単純なものでもよいが、可能性があります。 tsc はコードに問題はなく、ChromeまたはFirefoxのいずれでも、 コンソールのメッセージは表示されません。

更新

私はcombineLatestを試してみたが、それはまだ、コンソールには何も表示されません。私は何かが欠けているに違いないが、何が分からないのか。彼らは個別に働く。

Observable.combineLatest(db.cassette_designs, db.glass, (cassettes: CassetteData[], glass: GlassData[]): void => { 
    console.log(cassettes); // doesn't print 
    console.log(glass ); // deson't print 
}); 

観測は、次のように作成されています

... 

public Listen(event: string): Observable<Response> 
{ 
    return new Observable<Response>((subscriber: Subscriber<Response>): Subscription => { 
    const listen_func = (res: Response): void => subscriber.next(res); 

    this._socket.on(event, listen_func); 

    return new Subscription((): void => 
     this._socket.removeListener(event, listen_func)); 
    }); 
} 

... 

その後、実際に私は、関連するイベントに応答を聞く送る観測を取得します。例えば

... 

public cassette_designs: Observable<CassetteData[]>; 

... 

this.cassette_designs = _socket.Listen("get_cassette_designs") 
    .map((res: Response) => res.data.data); 

Answer 1

私は実際に 観測可能に購読することによって、combineLatestを稼働させることができました。

もともと私はこれをやっていた：あなたの調査結果をフォローアップするために

Observable.combineLatest(db.cassette_designs, db.glass).subscribe((data: any[]): void => { 
    console.log(data); 
    // cassettes - data[0] 
    // glass  - data[1] 
}); 

Answer 2

あなたは2つのソースの組み合わせデータを発する単一ストリーム（観測可能）を持つようにしたい場合はねえ、combineLatest方法をチェックしてください。

Answer 3

両方：Observable.zipとObservable.forkJoinは動作する必要があります。 （個人的には、私は 'forkJoin'を好む - 観測値をプッシュするのと同じ順序の配列を返すので、たくさんの引数は必要ありません）

おそらく、オブザーバブルを手動で作成している場合は、Observable.create ...）、あなたは、 '作成'メソッドから提供された両方のオブザーバに対して 'completed'を呼び出すことを忘れてしまっただけです。

Answer 4

：

Observable.combineLatest(db.cassette_designs, db.glass, (cassettes: CassetteData[], glass: GlassData[]): void => { 
    console.log(cassettes); 
    console.log(glass ); 
}); 

は今、私はこれをやっている

1）Observableを怠惰な実行でありますこれは、サブスクライブされるまで、パイプライン内で何も実行しないことを意味します。これはコンビナトリアルオペレータにとっても同様です。 zip、forkJoin、combineLatest、およびwithLatestFromはすべてObservablesに再帰的にサブスクライブし、の後にはだけを渡します。したがって

：あなたはポイントsubscribeもstream1とstream2で呼び出された時output.subscribe()を呼び出し、あなたがRxのすべての魔法を取得するまで

var output = Observable.combinelatest(stream1, stream2, (x, y) => ({x, y})); 

が実際に何もしません。

2）もっと重要な点ですが、独自の作成方法を開始するときは、まずドキュメントを参照して、既に存在するかどうかを確認してください。 Arrays,Promises、ノードスタイルのコールバック、そしてさらには標準event patternsの静的作成メソッドがあります。

このように、あなたのListen方法がなることができます：

public Listen<R>(event: string): Observable<R> { 
    return Observable.fromEvent(this._socket, event); 
} 

Answer 5

私はcombineLatestを使用しました。私は3つのAPIコールが必要でしたが、3つのレスポンスを組み合わせた1つのオブジェクトだけが必要でした。

私はこれと同じ記事で述べた式に続いてきた：

getGobalStats(): Observable<any> { 

    let obs1 = this._http.get(this._config.getGlobalStatsUrl(), this._config.getOptions()) 
     .map((res: Response) => { 
     return res.json().content; 
     }) 
     .catch((error: any) => { console.error(error); return error; }); 
    let obs2 = this._http.get(this._config.getGlobalStatsUrl() + '?type=1', this._config.getOptions()) 
     .map((res: Response) => { 
     return res.json().content; 
     }) 
     .catch((error: any) => { console.error(error); return error; }); 
    let obs3 = this._http.get(this._config.getGlobalStatsUrl() + '?type=3', this._config.getOptions()) 
     .map((res: Response) => { 
     return res.json().content; 
     }) 
     .catch((error: any) => { console.error(error); return error; }); 

     return Observable.combineLatest(obs1,obs2,obs3,(res1,res2,res3) => { return {all:res1,running: res2, cycling: res3}}); 
    } 

Answer 6

 Observable.merge(
      Observable.fromEvent(canvasEl, 'mousedown'), Observable.fromEvent(canvasEl, 'touchstart')) 
      .switchMap((e) => { 
       return Observable.merge(
        Observable.fromEvent(canvasEl, 'mousemove').takeUntil(Observable.fromEvent(canvasEl, 'mouseup')), 
        Observable.fromEvent(canvasEl, 'touchmove').takeUntil(Observable.fromEvent(canvasEl, 'touchend')), 
       ) 
        .pairwise() 
      }) 
      .subscribe(...