角 - 得到JSON佔位

Question

我已創建了角4版一個簡單的服務標題列表，我返回數組有幾個頭銜：

下面的代碼：

//post.service.ts 
import { Injectable } from '@angular/core'; 

@Injectable() 
export class PopstService { 

    constructor() {} 

    showPosts() { 
    return ['title1', 'title2', 'title3']; 
    } 

} 

而是有它的硬編碼在服務頁面我想從一些JSON數據中翻譯標題。

這裏的網址：

https://jsonplaceholder.typicode.com/posts

的數據是這樣的：

0 
userId 1 
id 1 
title "sunt aut facere repellat provident occaecati excepturi optio reprehenderit" 
body "quia et suscipit\nsuscip… rem eveniet architecto" 
1 
userId 1 
id 2 
title "qui est esse" 
body "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla" 

我怎麼能修改此服務從網上JSON，而不是我目前硬編碼的標題返回的標題？

Answer 1

步驟1.創建服務

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/do'; 
import 'rxjs/add/operator/catch'; 

@Injectable() 
export class ProductService{ 
    private _productUrl = 'api url'; 
    constructor (private _http:Http){} 

    getProductsHttp():Observable<any> { 
     return this._http.get(this._productUrl) 
      .map((response: Response) => <any> response.json()) 
      .do(data => console.log('All: ' + JSON.stringify(data))) 
      .catch(this.handleError); 
    } 

    private handleError(error: Response) { 
     console.error(error); 
     return Observable.throw(error.json().error || 'Server error'); 
    } 

步驟2更改組件象下面

constructor(private _producrService:ProductService) { 

    } 
    ngOnInit() { 
     //this.products=this._producrService.getProducts(); 
     this._producrService.getProductsHttp() 
       .subscribe(products => this.products = products, 
         error => this.errorMessage = <any>error); 

    }