각도 4/ID로 배열에서 데이터를 검색 할 수 없습니다.

Question

getItem() 메서드를 사용하여 ID로 배열에서 객체를 검색하려고합니다.

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" 
    } 
    ] 
} 

나는 내 구성 요소 내부의 방법을 테스트 그래서

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

더 많은 로그 및 wi 추가 알 겠어.

Answer 2

문제는지도 기능

에서 오는 것은 이것을 시도 :

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