Long Polling in Angular 4

Question

何かの進行状況を表示するにはAPI呼び出しが必要です。

私は、この1.5秒ごと

メインコンポーネント

private getProgress() { 
     this.progressService.getExportProgress(this.type, this.details.RequestID); 
    } 

Services.ts

public getExportProgress(type: string, requestId: string) { 
    Observable.interval(1500) 
     .switchMap(() => this.http.get(this.apiEndpoint + "Definition/" + type + "/Progress/" + requestId)) 
     .map((data) => data.json().Data) 
     .subscribe(
     (data) => { 
      if (!data.InProgress) 
       //Stop doing this api call 
     }, 
     error => this.handleError(error)); 
} 

コール工事を行うサービスを作成しましたが、それはいっています。進捗状況が終了したときにAPIコールをやめたいのですが（if (!data.InProgress）、これに取り組んでいます。

if (!data.InProgress)をこの観察可能な状態から正しく退会させるにはどうすればよいですか？

おかげ

Answer 1

あなたはtakeWhile演算子を使用することができます。ここでは

は結果です。 http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-takeWhile

が 満たす所定の述語各値限り観測源によって放出された値を発し、この 述語が満たされないように、その後、すぐに完了：ここ

は、ドキュメントです。ここで

一般的な例である：ここでは https://rxviz.com/v/yOE6Z5JA

Rx.Observable 
    .interval(100) 
    .takeWhile(x => x < 10) 
    .subscribe(x => { console.log(x); }); 

はあなたのコードを持つ例です。

public getExportProgress(type: string, requestId: string) { 
    Observable.interval(1500) 
     .switchMap(() => this.http.get(this.apiEndpoint + "Definition/" + type + "/Progress/" + requestId)) 
     .map((data) => data.json().Data) 
     .takeWhile((data) => data.InProgress) 
     .subscribe(
     (data) => { 
      ... 
     }, 
     error => this.handleError(error)); 
} 

Answer 2

私は変数にサービスコールを置くことによって、これを解決して、私は終わりだとき、その変数から脱退しました。

public getExportProgress(type: string, requestId: string): any { 
    let progress = Observable.interval(1500) 
     .switchMap(() => this.http.get(this.apiEndpoint + "Definition/" + type + "/Progress/" + requestId)) 
     .map((data) => data.json().Data) 
     .subscribe(
     (data) => {    
      if (!data.InProgress) { 
       this.toastyCommunicationService.addSuccesResponseToast("done"); 
       progress.unsubscribe(); 
      }    
     }, 
     error => this.handleError(error)); 
}