角4/IDで配列からデータを取得できません

Question

メソッドgetItem（）でidからArrayからオブジェクトを取得しようとしています。

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 

import { IItem } from './item'; 

@Injectable() 
export class ItemsService { 
    private _itemsUrl = './items.json'; 

    constructor(private _http:Http){} 

    getItems(): Observable<IItem[]> { 
    return this._http.get(this._itemsUrl) 
    .map((response: Response) => <IItem[]>response.json().itemsData) 
    } 

    getItem(id:number): Observable<IItem> { 
    return this.getItems() 
    .map(items => items.find(item => item.id === id)); 
    } 

} 

サービスはコンポーネントに注入されます。

import { Component, OnInit } from '@angular/core'; 
import { ActivatedRoute, Params } from '@angular/router'; 
import { ItemsService } from './items.service'; 
import { IItem } from './item'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit { 
    item: IItem; 

    constructor(
    private _ItemsService: ItemsService, 
    private route: ActivatedRoute 
    ) { } 

    ngOnInit(): void { 

    this._ItemsService.getItems().subscribe(items => console.log(items)) 

    this.route.params.forEach((params: Params) => { 
     let id = +params['id']; 
     this._ItemsService.getItem(id).subscribe(item => console.log(item)); 
    }) 
    } 
} 

エクスポートクラスIItem：

export class IItem { 
    id?: number; 
    title?: string; 
    titleUrl?: string; 
} 

items.json： ngOnInit（）：ボイド{

{ 
    "itemsData" : [ 
    { 
     "id": 1, 
     "title": "Item 1", 
     "titleUrl": "item-1" 
    }, 
    { 
     "id": 2, 
     "title": "Item 2", 
     "titleUrl": "item-2" 
    }, 
    { 
     "id": 3, 
     "title": "Item 3", 
     "titleUrl": "item-3" 
    } 
    ] 
} 

私は私のコンポーネントの内部メソッドをテスト

this._ItemsService.getItems().subscribe(items => console.log(items)) //Works fine 

    this.route.params.forEach((params: Params) => { 
     let id = +params['id']; 
     this._ItemsService.getItem(id).subscribe(item => console.log(item)); // Undefined 
    } 

エディタでプロジェクトを作成しようとしましたが、それは動作しません - だから、

Here!

を申し訳ありませんが、どのように私は私ののgetItem方法で観察からidでオブジェクトを取得することができますか？

Answer 1

いくつかの問題が発生することがあります：

getItem(id:number): Observable<IItem> { 
    return this.getItems() 
    .map(items => items.find(item => item.id === id)); 
    } 

1. idパラメータであり、このid
2. item.idとは項目がジャストstring

すなわち番号がないではありませんNaN

ログとウィジェットを追加する参照してください。

Answer 2

問題は、マップ機能

から来ていることは、これを試してみてください。

getItem(id:number): Observable<IItem> { 
    return this.getItems() 
    .map((response: Response) => <IItem[]>response.json().itemsData.find(item => item.id === id)); 
}