【问题标题】:Angular 2: Using HTTP requests with Observables to search a databaseAngular 2:使用带有 Observables 的 HTTP 请求来搜索数据库
【发布时间】:2016-11-08 01:15:08
【问题描述】:

我正在关注 Angular 2 关于使用 HTTP 请求和 Observables 搜索数据库的教程。这里是具体教程的链接:https://angular.io/docs/ts/latest/tutorial/toh-pt6.html

您可以搜索“按名称搜索”以找到我所指的教程区域。

这里是有问题的代码:

this.heroes = this.searchTerms
  .debounceTime(300)        // wait for 300ms pause in events
  .distinctUntilChanged()   // ignore if next search term is same as previous
  .switchMap(term => term   // switch to new observable each time
    // return the http search observable
    ? this.heroSearchService.search(term)
    // or the observable of empty heroes if no search term
    : Observable.of<Hero[]>([]))
  .catch(error => {
    // TODO: real error handling
    console.log(error);
    return Observable.of<Hero[]>([]);
  });

我能够对此代码进行适当的更改以使其与我的应用程序一起使用,但我想知道如何在它成功返回数据以及何时无法找到您要查找的内容时调用函数。这样做可能相对简单,但我无法弄清楚并且不太确定如何搜索它。

【问题讨论】:

    标签: angular angular2-observables


    【解决方案1】:

    我想知道当它成功返回数据时,当它无法找到你要找的东西时,如何调用函数

    您仍然需要订阅。在您订阅之前什么都不会发生。

    this.searchTerms
      .debounceTime(300)  
      .distinctUntilChanged()
      .switchMap(term => term  
        ? this.heroSearchService.search(term)
        : Observable.of<Hero[]>([]))
      .catch(error => {
        return Observable.of<Hero[]>([]);
      })
      .subscribe(heroes => {
        this.heroes = heroes;
        doOtherStuff();
      });
    

    您可以在这里处理“成功”、“错误”和“完成”的情况。 subscribe 分别接受这三个回调。

     .subscribe(
       (heroes) => {},  // success
       (error) => {},   // error
       () => {}         // completed/always
     );
    

    当它无法找到你要找的东西时

    只需检查订阅“成功”中的heroes 是否为空。

    【讨论】:

    • 这给了我以下构建错误:类型 'Subscription' 不可分配给类型 'Observable'
    • 为了让它与我的应用程序一起工作,我所做的更改之一是将 Hero[] 更改为 VarietyTypeGroup[] 并更改服务的名称,否则都是一样的。
    • 因为您无法将结果分配给它。结果是订阅后的订阅。您应该在成功回调中进行任何分配。并且让类成员不是数组的可观察对象,而只是数组
    • 同时检查this out。它显示了您应该如何处理订阅。组件销毁时应该清理干净
    • 不,应该是this.sub = this.searchTerms.debounce().subscribe()this.sub 是类中的字段,如示例中所示。然后退订this.sub
    猜你喜欢
    • 2017-09-09
    • 1970-01-01
    • 2017-03-24
    • 2017-10-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多