HTTP: Angular 2+TS 如何在 HTTP 中使用 Observables

Question

我从 angular.io 找到了一个例子。此示例与我的应用程序非常相似，具有相同类型的方法。这个例子使用的是 Promises，但我使用的是 Observables。如果我使用这个示例作为引用，我的应用程序中的每个方法都可以使用，除了服务中的 getHero 方法和 HeroDetailComponent 中的 ngOnInit 方法。所以我想知道是否有人可以帮助并将此方法转换为可观察的方法，因为我在语法方面遇到了麻烦。这是我需要转换为 Observable 和 plunker 的代码

//HeroService
  getHero(id: number) { // my id is String
    return this.getHeroes()
               .then(heroes => heroes.filter(hero => hero.id === id)[0]);
  }


//HeroDetailComponent
  ngOnInit() {
    if (this.routeParams.get('id') !== null) {
      let id = +this.routeParams.get('id');
      this.navigated = true;
      this.heroService.getHero(id)
          .then(hero => this.hero = hero);
    } else {
      this.navigated = false;
      this.hero = new Hero();
    }
  }

所以我想要这样的东西:

//HeroService
public getHero(id: string) {      
    return this.getHeroes()
    .subscribe(heroes => this.heroes.filter(hero => heroes.id === id)[0]); //BTW, what does this [0] mean??        
}

编辑:实际上我必须直接检索列表，它不适用于以下答案中建议的 return this.heroes。工作示例:

public getById(id: string) {   
    //return this.getHeroes() <---- didn't work
    return this.http.get('someUrl') // WORKS!
    .map(heroes => this.heroes.filter(hero => hero.id === id)[0]);           
}

现在我的 ngOnit 仍然有问题，我真的不明白为什么!

ngOnInit(){
    let id = this._routeParams.get('id');
    this.heroService.getById(id)
    //console.log("retrieved id: ",id ) <----- gives correct id!
    .subscribe(hero => this.hero = hero); 
    //console.log("hero: ", this.hero); <----- gives undefined!
}

EDIT2，在尝试移动到详细信息页面时仍然未定义:(我认为你的答案中有一个括号太多，试图查看并找到括号的正确位置？

ngOnInit(){
    let id = this._routeParams.get('id');
    this.heroService.getById(id)
    .subscribe(heroes => {
      // this code is executed when the response from the server arrives
      this.hero = hero 
    });
    // code here is executed before code from the server arrives
    // even though it is written below
}

Answer 1

如果您在 Observable 上调用 subscribe()，将返回一个 Subscription。您不能对订阅调用 subscribe()。

而是只使用一个运算符 (map()) 并在调用站点上使用 subscribe():

public getHero(id: string) {      
    return this.getHeroes()
    .map(heroes => this.heroes.filter(hero => heroes.id === id)[0]);
}

ngOnInit(){
    let id = this._routeParams.get('id');
    this.heroService.getHero(id)
    .subscribe(hero => this.hero = hero);
}

与 subscribe() 相反，map() 也对 Observable 进行操作，但也返回一个 Observable.

[0]表示只取过滤英雄的第一项。

更新

ngOnInit(){
    let id = this._routeParams.get('id');
    this._searchService.getById(id)
    .subscribe(searchCase => {
      // this code is executed when the response from the server arrives
      this.searchCase = searchCase; 
      console.log("id: ", this.searchCase); 
    });
    // code here is executed before code from the server arrives
    // event though it is written below
}

这段代码是一个函数

    searchCase => {
      // this code is executed when the response from the server arrives
      this.searchCase = searchCase); 
      console.log("id: ", this.searchCase); 
    }

传递给 subscribe() 并且 Observable 在有订阅者的新数据时调用此函数。因此，这段代码不会立即执行，而是仅在可观察对象发出新数据时执行。

subscribe() 之后的代码会立即执行，因此会在上述函数之前执行，因此 this.searchCase 还没有值。