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上的數據庫

回答

相關問題