Angular 使用主题和http客户端服务进行文本搜索时出现问题

我一直在使用keyup和Rxjs主题开发文本搜索

它搜索多个API并返回单个对象

在我清除文本字段之前，一切都正常，起初我得到了404，因为应用程序仍然使用空查询进行http调用

我可以通过检查字符串是否为空来抑制错误，但应用程序仍会以静默方式失败，这意味着：应用程序将不会更新、冻结

我在SearchComponent中设置了主题，并订阅了searchService中的搜索功能

public searchStr = new Subject<string>();

constructor(private searchService: SearchService) {
    this.searchService.search(this.searchStr)
    .subscribe((result)=> {
     this.result = result;
     this.movies = result[0];
     this.games = result[1];
     this.comics = result[2];

    })
   }

下面是一个API调用；它们都很相似

public searchMusic(query): Observable<any>{
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

          return this.http.get(this.url+'/music/search/'+query, options)
             .map((data) => {
             let  result;
                  result = data.json().data.albums.items;
                  return result;
                })
            .catch((error) => {
          return Observable.throw(error)
         })
      }

公共搜索音乐（查询）：可观察{
let headers=新的头（{'Content-Type'：'application/json'}）；
let options=newrequestoptions（{headers:headers}）；
返回此.http.get（this.url+'/music/search/'+query，选项）
.map（（数据）=>{
让结果；
result=data.json（）.data.albums.items；
返回结果；
})
.catch（（错误）=>{
返回可观察抛出（错误）
})
}

---

我想知道其他人是如何处理这些问题的

您的实现很好，但我建议在执行搜索操作之前添加min字符

我建议输入3个字符后开始搜索

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

searchStrFun(input){
 if(input.length > 2) {  
        searchStr.next(input)
    }
}

搜索strfun（输入）{
如果（input.length>2）{
searchStr.next（输入）
}
}

---

到了冰天雪地的地方？任何控制台.log

为什么不过滤空查询

public search(query: Observable<string>){
    return query.debounceTime(400)
    .distinctUntilChanged()
    .filter(query => query.length > 0)
    .switchMap(query => this.callSearches(query))
  }

公共搜索（查询：可观察）{
返回查询.去BounceTime（400）
.distinctUntilChanged（）
.filter（query=>query.length>0）
.switchMap（查询=>this.callSearches（查询））
}

你所说的“但应用程序仍会无声地失败，意思是：应用程序不会更新、冻结”到底是什么意思？你期望的行为是什么？我期望；如果我从文本字段中删除所有文本，然后输入新文本，它应该执行一个新的搜索，但它什么也不做，从上次搜索到页面的任何输出仍然是sameThanks，可能冻结是使用错误的词，基本上我得到一个404错误，当我清除文本字段时，因为对API的调用仍在执行，然后，当我重新输入文本时，搜索拒绝工作。如果我在代码的各个部分检查字符串是否为空，则可以抑制错误，但是搜索仍然不起作用。如果字符串为空，则建议简单的不执行搜索操作。除此之外，您的实现是好的

public searchMusic(query): Observable<any>{
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

          return this.http.get(this.url+'/music/search/'+query, options)
             .map((data) => {
             let  result;
                  result = data.json().data.albums.items;
                  return result;
                })
            .catch((error) => {
          return Observable.throw(error)
         })
      }

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

searchStrFun(input){
 if(input.length > 2) {  
        searchStr.next(input)
    }
}

public search(query: Observable<string>){
    return query.debounceTime(400)
    .distinctUntilChanged()
    .filter(query => query.length > 0)
    .switchMap(query => this.callSearches(query))
  }