검색어가 비어있는 경우 실시간 검색을 사용 중지합니다. - 각도 2

Question

this 튜토리얼을 사용하여 실시간 검색을 만들었지 만 쿼리에서 빈 검색을 보내면 내 엔드 포인트가 리디렉션됩니다. 키 업이 비어있는 경우 어떻게 기능을 비활성화 할 수 있습니까? 내 HTML에서

의 keyup을 :

<input(keyup)="searchTerm$.next($event.target.value)"> 

구성 요소 :

this.searchService.search(this.searchTerm$) 
.subscribe(results => { 
    this.results = results 
}); 

검색 서비스 :

constructor(private http: Http) { } 

search(terms: Observable<string>) { 
return terms.debounceTime(400) 
    .distinctUntilChanged() 
    .switchMap(term => this.searchEntries(term)); 
} 

searchEntries(term) { 
return this.http 
    .get(this.baseUrl + this.queryUrl + term) 
    .map(res => res.json()); 
} 

Answer 1

당신 수 단지 단락 :

<input (keyup)="$event.target.value && searchTerm$.next($event.target.value)"> 

"값이있는 경우, 다음 검색을 실행"

Answer 2

당신은 단지 Obserable에 filter 연산자를 추가 할 수 있습니다.

return terms.debounceTime(400) 
    .distinctUntilChanged() 
    .filter(term => this.term) 
    .switchMap(term => this.searchEntries(term)); 
} 

공백이 문제가 될 수 있기 때문에 당신이 this.term && this.term.trim().length > 0 같은 식으로 필터가 조금 더 구체적으로 만들 수 있습니다. 구현은 귀하에게 달려 있습니다.

Answer 3

return terms.debounceTime(400) 
    .distinctUntilChanged() 
    .switchMap(term => this.searchEntries(term)); 
} 

사용하지 않으려는 경우를 확인할 수 있습니다. 따라서 다음과 같이 변경하십시오 :

return terms.debounceTime(400) 
    .distinctUntilChanged() 
    .switchMap(term => { 
     if(term){ 
     this.searchEntries(term); 
     } 
    }); 
} 

더 세련된 해결책이 있지만 효과가있을 수 있습니다.