rest api調用顯示json數據點擊按鈕使用角度js 2.0

我是新來的角2，我試圖顯示json數據點擊一個按鈕，這是我所嘗試過的，有人可以採取看看，讓我知道我是否以正確的方式做到這一點。我提示以下錯誤：rest api調用顯示json數據點擊按鈕使用角度js 2.0

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

    }

來源

2017-04-20 OptimusPrime

哪裏是你的getData方法在組件？ –

你確定'getCustomerData'返回的響應是json嗎？ –

是的，這是@RomanC – OptimusPrime

它看起來像你缺少的訂閱：

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

我還強烈建議您將這段代碼進行構造，進入生命週期的OnInit鉤。這裏是我的樣子：

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

來源

2017-04-20 15:49:10 DeborahK

謝謝@DeborahK，讓我試試。 – OptimusPrime

這裏有一個肢體，我會刪除答案，如果我不正確。

既然你說你在點擊按鈕獲取數據，這是指：

(click)="getData()"

這將是一個錯字，當你寫你的問題，你可能意味着它是：

(click)="getCustomerData()"

由於像self.context這樣的錯誤起始錯誤通常是指該函數不存在，對你而言，它並不是。你已經在構造函數中聲明瞭它，並且不能從那裏獲取它。您需要將它的構造函數外，使其能夠達成，像這樣：

constructor(private service: ReturnsJsonArrayService) { 
    // leave empty 
    } 

    getCustomerData() { 
    this.data = this.service.getCustomerData() 
    }

這樣你最終可觀察到的，你需要在模板應用async管哪。如果你不是想用POJO工作，你需要手動subscribe到：

getCustomerData() { 
    this.service.getCustomerData() 
     .subscribe(data => { 
     this.data = data; 
     }); 
    }

如果是這樣的話，我建議你先看看這個：How do I return the response from an Observable/http/async call in angular2?因爲我們正在處理一個異步操作。爲此，請查看official docs about http。

希望這會有所幫助！ :)

來源

2017-04-20 19:09:28 Alex

rest api調用顯示json數據點擊按鈕使用角度js 2.0

回答

相關問題