Javascript RESTAPI调用，使用AngularJS2.0单击按钮显示json数据

我是angular 2的新手，我尝试在点击按钮时显示json数据，这就是我尝试过的，有人可以看一下，让我知道我是否用了正确的方式。 我得到下面的错误

error_handler.js:56 ORIGINAL EXCEPTION: self.context.getCustomerData is not a function
ErrorHandler.handleError @ error_handler.js:56
error_handler.js:59 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ error_handler.js:59
error_handler.js:60 TypeError: self.context.getCustomerData is not a function
    at CompiledTemplate.proxyViewClass.View_AppComponent0.handleEvent_18 (/AppModule/AppComponent/component.ngfactory.js:103)
    at CompiledTemplate.proxyViewClass.<anonymous> (view.js:664)
    at HTMLButtonElement.<anonymous> (dom_renderer.js:489)
    at ZoneDelegate.invokeTask (zone.js:367)
    at Object.onInvokeTask (ng_zone.js:264)
    at ZoneDelegate.invokeTask (zone.js:366)
    at Zone.runTask (zone.js:166)
    at HTMLButtonElement.ZoneTask.invoke (zone.js:420)

Thanks in advance


    Here is what i did.
    html:
    <div class="wrapper">
      <button type="button" class="btn" (click)="getData()">Click Me</button>
    </div>

    component:


    import { Component } from '@angular/core';
    import { Observable } from 'rxjs/Rx';
    import "rxjs/Rx";
    import { ReturnsJsonArrayService } from '../services/display-json-data.service';
    //import {Router} from "@angular/router";


    @Component({
      selector: 'display-customer-data',
      templateUrl:`app/templates/fetch.html`,
      providers: [ ReturnsJsonArrayService ]
    })
    export class DisplayCustomerDataComponent  {
      data: Observable<Array<any>>;
      constructor(private service: ReturnsJsonArrayService) {
        this.data = service.getCustomerData();
      }
    }

    service:

    import { Injectable } from '@angular/core';
    import { Http, Response } from '@angular/http';
    import { Observable } from "rxjs/Rx";
    import "rxjs/Rx";

    @Injectable()
    export class ReturnsJsonArrayService {
      constructor(private http: Http) {}
      getCustomerData(): Observable<any> {
        return this.http.get('/app/party-data.json')
        // ...and calling .json() on the response to return data
          .map((res:Response) => res.json())
          //...errors if any
          .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
      }

    }

error\u handler.js:56原始异常：self.context.getCustomerData不是函数
ErrorHandler.handleError@error_handler.js:56
错误_handler.js:59原始堆栈跟踪：
ErrorHandler.handleError@error_handler.js:59
error\u handler.js:60 TypeError:self.context.getCustomerData不是函数
在CompiledTemplate.proxyViewClass.View_AppComponent0.handleEvent_18（/AppModule/AppComponent/component.ngfactory.js:103）
在CompiledTemplate.proxyViewClass上。（view.js:664）
在HTMLButtoneElement。（dom_renderer.js:489）
在ZoneDelegate.invokeTask（zone.js:367）
位于Object.onInvokeTask（ng_zone.js:264）
在ZoneDelegate.invokeTask（zone.js:366）
位于Zone.runTask（Zone.js:166）
在HTMLButtonElement.ZoneTask.invoke（zone.js:420）
提前谢谢
这就是我所做的。
html:
点击我
组成部分：
从'@angular/core'导入{Component}；
从'rxjs/Rx'导入{Observable}；
导入“rxjs/Rx”；
从“../services/display json data.service”导入{returnsjsonarayservice}；
//从“@angular/Router”导入{Router}”；
@组成部分({
选择器：“显示客户数据”，
templateUrl:`app/templates/fetch.html`，
提供者：[返回服务]
})
导出类DisplayCustomerDataComponent{
数据：可观察；
构造函数（专用服务：返回服务）{
this.data=service.getCustomerData（）；
}
}
服务：
从“@angular/core”导入{Injectable}；
从'@angular/Http'导入{Http，Response}；
从“rxjs/Rx”导入{Observable}；
导入“rxjs/Rx”；
@可注射（）
导出类返回服务{
构造函数（私有http:http）{}
getCustomerData（）：可观察{
返回此.http.get（“/app/party data.json”）
//…并对响应调用.json（）以返回数据
.map（（res:Response）=>res.json（））
//…错误（如果有）
.catch（（error:any）=>Observable.throw（error.json（）.error | |“服务器错误”）；
}
}

看起来您缺少订阅：

this.data = service.getCustomerData().subscribe(...);

我还强烈建议您将这段代码从构造函数中移出，放到onInit生命周期挂钩中。下面是我的照片：

ngOnInit(): void {
    this._productService.getProducts()
            .subscribe(products => this.products = products,
                       error => this.errorMessage = <any>error);
}

ngOnInit（）：void{
这是._productService.getProducts（）
.subscribe（products=>this.products=products，
error=>this.errorMessage=error）；
}

这里有点言过其实，如果我不正确，我会删除答案

因为您说过，您只需点击一个按钮即可获得数据，该按钮将指：

（单击）=“getData（）”

当你写问题时，这可能是一个打字错误，你的意思可能是：

（单击）=“getCustomerData（）”

这是因为像

self.context

启动错误这样的错误通常指函数不存在。而对你来说，它不是。您已经在构造函数中声明了它，无法从那里获取它。您需要将其放置在构造函数之外，以便可以访问它，如下所示：

constructor（私有服务：returnsjservice）{
//留空
}
getCustomerData（）{
this.data=this.service.getCustomerData（）
}

这样，您就得到了一个可观察对象，您需要在模板中应用管道。如果您想使用POJO，则需要手动订阅：

getCustomerData（）{
this.service.getCustomerData（）
.订阅（数据=>{
这个数据=数据；
});
}

如果是这样的话，我建议您看看这个：因为我们正在处理一个异步操作。为此，请查看

---

希望这有帮助！：）

组件中的

getData

方法在哪里？您确定

getCustomerData

返回的响应是json吗？是的，它是@RomanClet me更新post@MadhuRanjan here you go@MadhuRanjan getData（）{返回this.http.get（'app/party data.json'））//…并在响应上调用.json（）以返回data.map（（res:response）=>res.json（））}谢谢@DeborahK，让我试试。