將使用http的角度2服務的數據傳遞到組件

Question

我有一個從服務調用函數的組件。

export class ZoomComponent { 
    constructor(private productService: ProductService){} 
    container: any; 
    product:ProductObj[]; 
    ngOnInit() { 
     this.product = this.productService.getProduct() 
    } 
} 

在服務中，我有一個http調用與訂閱。我希望將http請求的結果重新調整到我的組件。

@Injectable() 
export class ProductService { 

    product:ProductObj[]; 
    constructor(private http: Http) { } 

    getProduct() {   
     return this.http.get('./friends.json').map((res:Response) => res.json()) .subscribe(
       data => this.product = data 
       //function(data){console.log(data)} 
      )  
     } 
} 

我是angular2的新手。我希望產品變量作爲我的組件上的http請求的結果返回。不過，雖然給予的console.log，可觀察的對象是與我的響應數據

Answer 1

@Injectable() 
export class ProductService { 
    constructor(private http: Http) { } 

    getProduct() {   
     return this.http.get('./friends.json') 
     .map((res:Response) => res.json())  
    } 
} 

而在組件返回：在服務

constructor(private productService: ProductService) {} 

ngOnInit() { 
    this.productService.getProduct().subscribe(
     data => console.log(data) 
    ) 
}