非同期先行検索を実装する適切な方法は何ですか？

Question

私のAngularアプリには、 "Listings"のページがあります。何百ものリスティングがあるので、結果は一度に20件ずつしかロードされず、ユーザが一番下にスクロールしてMoreをクリックするとロードされます。

検索ボックスをリストの上に置いて、より特定の検索語をサーバーに送信して一致するリストのみを返すことができます。例えば

ユーザーが検索ボックスに「myterm」を入力したときに、角度はhttps://myapp.com/listings/?search=mytermにGETを送信し、「掲載」ページに結果のみが表示されます。

Angular 2+でこれを行う正しい方法がわかりません。 AngularJSでは、毎回約束を返すという簡単な要求を出したのですが、Searchが押されましたが、Angular2 +には別のアプローチがあると思われます。私はそれについての文献を見つけることができないようだ。

これまでのところ、私はちょうど空の検索パラメータを指定してサービスを呼び出すコンポーネントで最初の関数呼び出しを持っている（別名、すべてを取得）

ngOnInit() { 
    this.listings = this.listingService.getListings(''); 
} 

Answer 1

それは本当にだろうので、私はReactiveFormsModuleを使用することをお勧めこの問題を解決するのは簡単です。

まずFormGroupを定義しましょう。フォームグループは1つのフォームコントロールで構成されます。

form: FormGroup; 

constructor(formBuilder: FormBuilder){ 
    this.form = formBuilder.group({ 
     search: '' 
    }); 
} 

今、私たちは私たちの簡単なフォームを定義したので、私たちが興味を持っていることは、ユーザーの種類として要求を送信しているので、基本的には私たちのフォームコントロールの値が変更された時はいつでも。私たちは、このような観測valueChangesを購読することができます：

ngOnInit(){ 
    this.form.get('search').valueChanges 
     .subscribe(value => this.listingService.getListings(value))); 
} 

は、これは明らかに動作しますが、これに伴う問題は、我々はすべての単一の文字、ユーザがタイプのリクエストを送信したくないということです。私たちは彼が終わるまで待っています。

this.form.get('search').valueChanges 
     .debounceTime(1000) 
     .subscribe(value => this.listingService.getListings(value))); 

我々はまた、（getListingsも、観察を返すので）サブスクリプションの連鎖を作ることを避けるためにswitchMap演算子を使用します。私たちはdebounceTime演算子を使用していることを修正することができます。ユーザーが入力したすべてのものを削除したと仮定して、空の文字列でリクエストを送信したくないため、最後にフィルタを追加する必要があります。そして、我々はそのためfilterオペレータを持っている：

this.form.get('search').valueChanges 
     .filter(value => value) 
     .debounceTime(1000) 
     .switchMap(value => this.listingService.getListings(value)) 
     .subscribe(listings => this.listings = listings); 

テンプレートは、このようになります。応答のための

<form [formGroup]="form"> 
    <input type="text" formControlName="search"> 
</form>