Javascript 角度-从json占位符获取标题列表

我使用Angular version 4创建了一个简单的服务，其中我返回了一个带有几个标题的数组：

代码如下：

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

@Injectable()
export class PopstService {

  constructor() {}

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

}

我不想在服务页面中硬编码，而是想从一些json数据中获取标题

以下是网址：

数据如下所示：

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返回标题而不是当前硬编码的标题？

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

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Http，Response}；
从“rxjs/Observable”导入{Observable}；
导入'rxjs/add/operator/map'；
导入'rxjs/add/operator/do'；
导入“rxjs/add/operator/catch”；
@可注射（）
出口类产品服务{
private_productUrl='api url'；
构造函数（私有http:http）{}
getProductsHttp（）：可观察{
返回此。\ http.get（此。\产品URL）
.map（（response:response）=>response.json（））
.do（data=>console.log（'All:'+JSON.stringify（data）））
.接住（这个.把手错误）；
}
私有句柄错误（错误：响应）{
控制台错误（error）；
返回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);

  }

constructor（私有的producrService:ProductService）{
}
恩戈尼尼特（）{
//this.products=this.\u producrService.getProducts（）；
这是.\u producservice.getProductsHttp（）
.subscribe（products=>this.products=products，
error=>this.errorMessage=error）；
}