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??        
}

编辑：我必须直接检索列表，它没有按照以下答案中的建议返回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

如果您在subscribe()上致电Observable，则会返回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在为订阅者提供新数据时调用此函数。因此，此代码不会立即执行，只有当observable发出新数据时才会执行。

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

Answer 2

这是你可以做到的一种方式：

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

//HeroDetailComponent
ngOnInit(){
    let id = this._routeParams.get('id');
    this.heroService.getHero(id)
        .subscribe(hero => {
            // your code here
        });
}

[0]是一个数组访问器。您正在使用它选择数组索引0上的第一个元素。你需要这个，因为Array.filter()返回一个带有过滤值的新数组，但你只需要一个英雄。

HTTP：Angular 2 + TS如何在HTTP

2 个答案: