Typescript/Angular 2を使用してアイテムIDを持つJSONフィードから1つのアイテムを取得するにはどうすればよいですか？

Question

私はJSONフィードからデータを取得し、次のコードでservice.tsファイルがあります：

@Injectable() 
export class HeroService { 
    constructor(private http: Http) { } 

    private _heroesUrl = '/heroes.json'; 

    getHeroes() { 
    return this.http.get(this._heroesUrl) 
     .map(res => <Hero[]>res.json().data) 
     .do(data => console.log(data)) 
     .catch(this.handleError); 
    } 
    private handleError(error: Response) { 
    console.error(error); 
    return Observable.throw(error.json().error || 'Server error'); 
    } 

    getHero() { 
    //** code to go here 
    } 
} 

とサービスを使用するコンポーネントファイル：

export class HeroesComponent implements OnInit { 
    heroes: Hero[]; 
    selectedHero: Hero; 
    errorMessage: any; 

    constructor(private _router: Router, private _heroService: HeroService) { } 

    getHeroes() { 
     this._heroService.getHeroes() 
     .subscribe(
     heroes => this.heroes = heroes, 
     error => this.errorMessage = <any>error); 
    } 

    getHero() { 
    let id = this._routeParams.get('id'); 

    //** code to go here 
    } 

} 

さて、getHeroes（）作品をheroes.jsonのすべてのアイテムをservice.ts経由で取得します。しかし、私がしようとしているのは、アイテムの "id"を使ってheroes.jsonからアイテムを1つだけ取り出します。これをどうやって行うのですか？私は.filterを使ってみましたが、うまくいきませんでした。私は遅すぎると思う

getHero(id) { 
    return this.http.get(this._heroesUrl) 
     .map(res => (<Hero[]>res.json().data).filter(hero => hero.id === id)) 
     .do(data => console.log(data)) 
     .catch(this.handleError); 
} 

Answer 1

あなたは観察できないデータのフィルタ方法を、使用する必要があります。

ngOnInit() { 
    this.sub = this.route.params.subscribe(params => { 
     if (params['id'] !== undefined) { 
     let id = +params['id']; 
     this.projectsvc.getProject(id) 
      .then(proj => this.currproject = proj); 
     } 

    }); 
    } 

が、これは

Answer 2

が、これは私のためにうまく働いた：ありがとう

Answer 3

より良い方法を役に立てば幸い私のcomponent.tsからここ

は私のservice.ts

getProject(id: number) { 
     console.log(id); 
     return this.getProjects() 
       .then(projects => projects.filter(project => project.id == id)[0]) 
       .catch(this.handleError); 
     } 

からのコードスニペットであり、これは、それが消費される方法ですそれを行うには以下のようにすることができます。

getHero(id: number): Observable<Hero> { 
    return this.getHeroes() 
     .map((heroes: Hero[]) => heroes.find(hero => hero.id === id)); 
} 

そして中component.ts：

getHero() { 
    let id = this._routeParams.get('id'); 
    this._heroService.getHero(id) 
      .subscribe(
       hero => this.hero = hero, 
       error => this.errorMessage = <any>error); 
} 

service.tsで