角型コントロール最後に観測可能な変更

Question

私は提案のバックエンドを照会するオートコンプリート機能を構築していますが、ユーザが角度のあるフォームコントロールで入力している間に特定の遅延を与えた最後のクエリを取得したいだけです。現在、私のコードは次のようになっています

this.newVendorForm.get('address').valueChanges.pipe(delay(3000)).subscribe(
    address => { 
    this.geocodeApi.getAddressSuggestions(address) 
     .subscribe(
     response => { 
      console.log('address suggestions'); 
      console.log(response); 
      this.addressSuggestions = response; 
     }, 
     error => { 
      console.log('error getting address suggestion'); 
      console.log(error); 
     } 
    ) 
    } 
); 

これは動作しますが、これは3000ミリ秒後にそれぞれの入力された文字を照会します。たとえば、 'test'は3000ミリ秒後に['t'、 'te'、 'tes'、 'test']をクエリします。 3000 msの遅延後にvalueChangesから最後の変更（つまり「テスト」）を受けて、サブスクライブするにはどうすればよいですか？あなたに助けてくれてありがとう

Answer 1

debounceTimeとswitchMapが混在しています。

this.newVendorForm.get('address').valueChanges.pipe(
    debounceTime(3000), 
    switchMap(address => this.geocodeApi.getAddressSuggestions(address).pipe(
    catchError(err => { 
     console.error(err); 
     return of(); 
    }) 
)), 
    filter(Boolean), 
).subscribe(response => this.addressSuggestions = response); 

• debounceTime 2つのvalueChanges排出量は、互いの3秒以内に存在する場合、最後のものだけが使用されているようになります。これはdelayと異なり、3秒後にすべての変更が出されます。
• switchMapはhttpリクエストなどの内部観測を受け取り、観測可能なストリームをそのストリームに変更します。つまり、現在観察可能なストリームgetAddressSuggestionsに登録しています。何かがswitchMapに出ると、前の観測値が取り消されます。その結果、以前に作成されたgetAddressSuggestionsコールが新しいコールが開始される前に完了していない場合、前のコールはキャンセルされます。
• catchError（lettableオペレータバージョン.catch）は、valueChangesの代わりに観測可能なgetAddressSuggestionsで使用されます。それ以外の場合、APIからのエラーがあった場合、observableのvalueChangesは完了します。 catchErrorを使用すると、valueChanges observableを完了せずにエラーを処理できます。
• filterは、値を持つ応答のみを出力するために使用されます。エラーが発生した場合、of()は発行されません。これは、この状況を処理する方法の1つに過ぎません。

最後に、のマニュアルを避けたい場合は、.unsubscribeにする必要があります。代わりに、サブスクリプションを処理するテンプレート内の| asyncパイプに頼ることができます。