Angular - Titelliste von json Platzhalter erhält

Question

ich einen einfachen Dienst mit kantiger Version erstellt habe 4, wo ich ein Array mit einem paar Titeln zurück:

Hier ist der Code:

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

@Injectable() 
export class PopstService { 

    constructor() {} 

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

} 

Statt es mit in der service-seite hartcodiert möchte ich stattdessen die titel von einigen json-daten herunterladen.

Hier ist der url:

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" 

Wie kann ich ändern, diesen Service die Titel aus der Online-json statt meinem aktuellen fest codierten Titel zurückzukehren:

https://jsonplaceholder.typicode.com/posts

Daten wie folgt aussieht?

Answer 1

Schritt 1. Erstellen Sie ein Service

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'); 
    } 

Schritt 2 Ändern Sie die Komponente wie unten

constructor(private _producrService:ProductService) { 

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

    }