httpをコンポーネントに使用するangle 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) 
    ) 
}