2017-11-28 3 views
0

私は自動補完HTTP呼び出しと検索HTTP呼び出しを実行しています...実行アクションがトリガされたときに中止するにはオートコンプリート呼び出しが必要です。私のオートコンプリートの方法でtakeUntilで観測値をキャンセルしていません

private onExecute$ = new Subject(); 

::私が今やっていることはそうのような件名を使用している

executeAutoComplete(e) { 
    this.myService.searchAutoComplete(e.criteria) 
    .pipe(
    takeUntil(this.onDestroy$), 
    takeUntil(this.onExecute$), 
    map( 
    // continue with more code 

その後、私は信号を上げる私のexecuteメソッドに:

executeSearch(e) { 
console.log('triggering onExecute signal'); 
this.onExecute$.next(); 
    // other code 
} 

ので、私のコンソールでは、 'トリガするonExecute信号'が表示されますが、オートコンプリートの結果は完全な検索が実行を開始した後に戻ります。信号を発生させたら、takeUntilはチェーンを中断しますか?それは動作しません。

本質的に私が防止しようとしているのは、ユーザーが検索を開始したときにオートコンプリートの結果が返され、ドロップダウンされないようにすることです。

私はここで何が欠けていますか?

編集 -

順序が原因実行常にオートコンプリートの前に呼び出されたデバウンス時間にInfactは問題であり、順序が予測不能anwaysすることができます。 Observableチェーンがまだアクティブでない場合、onExecute.next()が失われることを認識していませんでした。

私はsearchLoading変数も設定されていますが、どのように使用できますか?

は、私が試した:それは常に本当だとして、これは動作しません

takeUntil(Observable.of(this.searchLoading)) 

!動的に評価されるブール値でtakeUntilを使用するにはどうすればよいですか?

編集2 -

ではなくtakeWhileを使用して得た:

takeWhile(() => !this.searchLoading)) 

答えて

1

はそれがexecuteSearchexecuteAutoComplete前に呼び出されていることだろうか?観測可能チェーンが構築される前にonExecute$が既に値を発行している場合、検索の実行を停止しません。

ところで、検索を実行するとサブスクリプションにunsubscribeと電話する方が簡単だと思います。

+0

変数(takeUntil(()=> this.alive)を使用し、変数this.aliveをどこでもtrueに切り替えることができます。 – Eliseo

+0

が注文をチェックするときにthis.onDestroy $がfalseになることがわかりません...ユーザーがテキストを入力したときに子コンポーネントによって親に送出され、ユーザーがEnterキーを押すか検索アイコンをクリックしたときに実行イベントが送出されます。技術的には、変更イベント(オートコンプリート)これは一連のユーザー操作ですが、必ずしもその順序である必要はありません...変更に400msのデバウンスがあり、問題の原因となっている可能性があります。 – SBKDeveloper

+0

私のオリジナルの質問にコメントを追加しましたこれは、ありがとう! – SBKDeveloper

1

悪い知らせは、機能します。

私はコードのこの近似を使って欠陥を見つけようとしていますが、残念ながらできません。
誰かにとって有用な場合に備えてここに投稿します。takeUntil()unsubscribe()の対象に

console.clear() 
 

 
const takeUntil = Rx.operators.takeUntil; 
 

 
const onDestroy$ = new Rx.Subject(); 
 
const onExecute$ = new Rx.Subject(); 
 

 
const source$ = Rx.Observable.timer(0,1000) 
 
const executeAt$ = Rx.Observable.timer(3000) 
 

 
executeAt$ 
 
    .subscribe(x => { 
 
    console.log('execute'); 
 
    onExecute$.next(); 
 
    }) 
 

 
source$ 
 
    .pipe(
 
    takeUntil(onDestroy$), 
 
    takeUntil(onExecute$) 
 
) 
 
    .subscribe(console.log)
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.2/Rx.js"></script>

'Don't Unsubscribe'にベン・レッシュは約あまりにも多くのサブスクリプション・オブジェクトを維持

あなたは命令的あなたのサブスクリプションを管理している兆候であると言い、そしてRxの力を利用していません。

takeUntil


脚注を使用してサブスクリプション管理を作曲 - RxのコードがOKに見えることを考えると、サービスインスタンス

、別の可能な原因でありますAngular servicの複数のインスタンスe。

private onExecute$ = new Subject();がサービスでラップされていて、そのサービスが2つの配列(モジュール+コンポーネントまたは2つのコンポーネント)で提供されている場合、.next()を呼び出したインスタンスは使用されるインスタンスと異なる場合がありますtakeUntil()

それは長いショットだし、上記のコードは、それはケースではありません示しますが、かなり頻繁に発生するようです。

+0

コンセプトは(私はそれがすべきだと思ったように)動作するので、コードスニペットをありがとう私はコードをより詳細に見てみましょう、おそらく私はどこかで何かが欠けている... – SBKDeveloper

関連する問題