Angular 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：

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

我测试了组件内部的方法： ngOnInit(): 无效 {

    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 方法从 Observable 中按 id 检索对象？

Answer 1

可能有几个问题：

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

1. id 参数为NaN
2. 没有与此id 相关的项目
3. item.id 不是数字，即 string

只需添加更多日志，就会看到。

Answer 2

问题来自您的地图功能

试试这个：

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