Angular 4通过json循环并获取id上的数据库

如何获取id为1时的内容，例如localhost：5555/product/1？我的路线文件已经设置

我有一个JSON文件中像

[ 
    { 
    "id": "0", 
    "name": "xxxx", 
    "icon": "https://wikidownload.com/Download/xxxx.png", 
    "Website":"http.xxx.com" 
    }, 
    { 
    "id": "1", 
    "name": "zzz", 
    "icon": "zzzz.png", 
    "Website":"http.zzz.com" 
    }, 
    { 
    "id": "2", 
    "name": "yyy", 
    "icon": "yyy.png", 
    "Website":"http.yyy.com" 
    } 
]

在我组件：

ngOnInit() { 
    this.route.params 
     .subscribe(
     (params : Params) => { 
      this.id = params.id; //get the id from the route 
      this.getWhipById(this.id); 
     } 
     ) 
    } 

    getWhipById(id:number){ 
    console.log (id); 
    // console.log (this.productService.getById(id)); 

    // this.productService.get().map(
    // res => { 
    //  return res.filter(item => item.id === id)[0]; 
    // }); 
    }

product.service.ts

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


@Injectable() 
export class ProductService { 


    constructor(private http: Http) {} 



    /** 
    * Returns an Observable for the HTTP GET request for the JSON resource. 
    * @return {string[]} The Observable for the HTTP request. 
    */ 
    get(): Observable<string[]> { 
    return this.http.get('assets/data/products.json') 
     .map((res: Response) => res.json()) 
     //    .do(data => console.log('server data:', data)) // debug 
     .catch(this.handleError); 
    } 

    getById(id: number): Observable<string[]> { 
    return this.get() 
     // 
     // .map((res: Response) => res.find(res => res.id == id)); 
     // .map(movies => movies.find(movie => movie.id == id)); 
    } 
    /** 
    * Handle HTTP error 
    */ 
    private handleError (error: any) { 
    // In a real world app, we might use a remote logging infrastructure 
    // We'd also dig deeper into the error to get a better message 
    let errMsg = (error.message) ? error.message : 
     error.status ? `${error.status} - ${error.statusText}` : 'Server error'; 
    console.error(errMsg); // log to console instead 
    return Observable.throw(errMsg); 
    } 
}

我通过身份证到getWhipById()在这一点上我混淆 ProductService.get()将获得所有内容..我使用地图过滤器，地图查找，但我可以得到的内容只是为我的身份证通过。另一件事是调试...如果我做console.log（）它只显示可观察和其他属性，但不是关于JSON内容的任何东西

来源

2017-07-18 marco gomes

可你还列出服务get方法@marco，或者如果可以重新对这一问题 –

一个plunker我刚添加的服务......但服务的工作原理发现...显示的所有内容..我需要的是显示一个特定产品的内容 –

我猜你忘了在映射后忘记在你的组件中订阅 –

一个observable只运行，如果它订阅，所以如果它返回一个。地图，但没有订阅它，它永远不会运行.map。尝试订阅地图的结果

getWhipById(id:number){ 
     let mapped = this.productService.get().map(
      res => { 
      return res.filter(item => item.id === id); 
      }); 
     mapped.subscribe((response) => { 
      console.log('subscribe' + response.json()); 
     });   
     }

来源

2017-07-18 10:15:55

需要在调用filter（）之前调用res.json（）？

this.ProductService 
    .get() 
    .map(res => res.json().filter(item => item.id === id)) 
    .subscribe(resp=>console.log(resp));

来源

2017-07-18 10:21:00

Angular 4通过json循环并获取id上的数据库

回答

相关问题