角度4清除搜索結果

我正在使用下面的代碼爲我的組件提供異步搜索功能。搜索完成後，如何清除組件中某個方法的結果？將searchResults設置爲空數組意味着它不再是搜索結果數組，因此搜索不再起作用。在進行選擇時，我需要清除結果並允許用戶再次搜索。角度4清除搜索結果

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); 
    }

來源

2017-09-21 beachCode

給我們一些上下文...你在哪裏訂閱observable？ searchPeople方法的結果是什麼？ – rick

@rick我添加了更多。 thx – beachCode

仍然正在訂閱。但既然你使用的是map，它應該是一個數組 – rick

您可以用主題合併的搜索結果，將清除結果：

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([]));

然後清除結果ts只需撥打電話：

this.clearSearch.next();

來源

2017-09-21 18:34:23 martin

就像一個魅力！謝謝 – beachCode

角度4清除搜索結果

回答

相關問題