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

Question

我从angular.io中找到了一个示例。这个例子与我的应用非常相似，使用了相同的方法。这个例子使用Promises，但我使用Observables。如果我使用这个例子作为参考，除了服务中的getHero方法和HeroDetailComponent中的ngOnInit之外，我已经在我的应用中使用了每种方法。所以我想知道是否有人可以帮助并将此方法转换为可观察的，因为我在语法上遇到了问题。这是我需要转换为可观察的代码和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

如果你在Observable返回一个Subscription叫subscribe()。你不能在订阅致电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()会返回一个带有过滤值的新数组，但你只需要一个英雄。

Answer 3

很好的答案在这里，但不得不调整他们稍微所以我加入了我自己的

服务看起来像这样...

import {Injectable}  from '@angular/core'; 
import {Http, Response} from '@angular/http'; 
import {Person} from '../models/person'; 
import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/operator/catch'; 

@Injectable() 
export class PersonService { 
    private personsUrl = 'app/data/persons.json'; 

    constructor(private http:Http) { 
    } 

    getPersons():Observable<Person[]> { 
    return this.http.get(this.personsUrl) 
     .map(
     (res:Response) => { 
      let persons = res.json(); 
      return persons || {}; 
     } 
    ) 
     .catch(this.handleError); 
    } 

    getPerson(id:number) { 
    return this.getPersons() 
     .map(persons => persons.filter(person => person.id === id)[0]); 
    } 

    private handleError(error:any) { 
    let errMsg = (error.message) ? error.message : 
     error.status ? `${error.status} - ${error.statusText}` : 'Server error'; 
    console.error(errMsg); 
    return Observable.throw(errMsg); 
    } 
}