角度4の明確な検索結果

Question

以下のコードを使用して、コンポーネントの非同期検索機能を提供しています。検索が完了したら、コンポーネントのメソッドから結果をクリアするにはどうすればよいですか？ searchResultsを空の配列に設定すると、検索結果の配列ではなくなり、検索はもはや機能しなくなります。選択が行われると、結果をクリアして、ユーザーが再び検索できるようにする必要があります。

searchResults: Observable<any>; 
this.searchResults = 
     this.form.controls['search'].valueChanges 
     .debounceTime(200) 
     .switchMap(query => this.search.searchPeople(query)); 

ここでテンプレートコードは次のとおりです。

<md-input-container style="width:500px"> 
    <input mdInput formControlName="search" placeholder="Search Name" /> 
</md-input-container> 

     <div *ngFor="let person of searchResults | async"> 
     <p><button md-raised-button color="primary" 
      (click)="selectPerson(person)"> 
      Select</button> {{person.firstName}}</p> 
     <p><img [src]="person.photo.url"/></p> 
     <hr/> 
     </div> 

や検索方法：

searchPeople(query){ 
    return this.http.get(`${BASE_URL}?q=${query}`) 
     .map((res:Response) => res.json()) 
     .map(json => json.items); 
    } 

Answer 1

あなたは結果を消去します件名で検索結果をマージすることができます。

clearSearch = new Subject(); 
searchResults: Observable<any>; 

... 

this.searchResults = this.form.controls['search'].valueChanges 
    .debounceTime(200) 
    .switchMap(query => this.search.searchPeople(query)) 
    .merge(this.clearSearch.mapTo([])); 

次に、ちょうどお電話ください：

this.clearSearch.next();