代码之家  ›  专栏  ›  技术社区  ›  Alexandr Belov

角度4/无法按id从数组中检索数据

  •  0
  • Alexandr Belov  · 技术社区  · 7 年前

    我正在尝试使用该方法按id从数组中检索对象 getItem() .

    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));
        })
       }
    }
    

    导出的类 项目 :

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

    项目。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():void{

        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!

    那么,我如何通过id从我的 获取项目 方法

    2 回复  |  直到 7 年前
        1
  •  1
  •   kemsky    7 年前

    可能存在几个问题:

      getItem(id:number): Observable<IItem> {
        return this.getItems()
        .map(items => items.find(item => item.id === id));
      }
    
    1. id 参数为 NaN
    2. 没有与此相关的项目 身份证件
    3. item.id 不是数字,即。 string

        2
  •  0
  •   Mehdi    7 年前

    试试这个:

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