函數中使用的http是未定義的。爲什麼？

Question

• 我的組件源

  import { Component, OnInit } from '@angular/core'; 
  import { Http } from '@angular/http'; 
  
  //import { DatatableComponent } from '../../shared/ui/datatable/datatable.component' 
  
  @Component({ 
      selector: 'app-root', 
      template: '<button id="testBtn"></button>' 
  }) 
  
  
  export class MarketComponent implements OnInit { 
  
      constructor(public http: Http) { } 
  
      ngOnInit() { 
  
      let btn = document.getElementById("testBtn"); 
       if(btn){ 
       btn.addEventListener('click', 
  
        function(){ 
  
        this.http.get('./test.json') 
        .map(response=>response.json()) 
        .subscribe(
         data => { //success 
         console.log("success"); 
         }, 
         error => console.log("HttpRequestButton Error"), //error 
        () => console.log("CategoryCount HttpRequestButton Get Test Finish") 
        ); 
  
        } 
       ); 
       } // if end 
  
      } 
      } 
  

我不知道......

我加入了Click事件addEventListener方法。

函數中使用的http是未定義的。爲什麼？ 我不知道原因。

我必須在函數內部使用http。 有沒有辦法？

Answer 1

代碼

btn.addEventListener('click', 
      function(){ 
      this.http.get('./test.json') 

應該

btn.addEventListener('click', 
     () => { 
      this.http.get('./test.json') 

更多

https://basarat.gitbooks.io/typescript/docs/arrow-functions.html

Answer 2

這 '這' 是不是 '這個' 你想要的。您可以改爲使用箭頭函數，或者最後調用bind（this）。

function(){ 

     this.http.get('./test.json') 
     .map(response=>response.json()) 
     .subscribe(
      data => { //success 
      console.log("success"); 
      }, 
      error => console.log("HttpRequestButton Error"), //error 
     () => console.log("CategoryCount HttpRequestButton Get Test 
     Finish") 
     ); 

     }.bind(this) 

事實上，你應該實現這樣的：

@Component({ 
    selector: 'app-root', 
    template: '<button (click)="onClick()"></button>' 
}) 


export class MarketComponent implements OnInit { 

    constructor(public http: Http) { } 

    ngOnInit() {} 

    onClick(){ 
     this.http.get('./test.json') 
     .map(response=>response.json()) 
     .subscribe(
      data => { //success 
      console.log("success"); 
      }, 
      error => console.log("HttpRequestButton Error"), //error 
     () => console.log("CategoryCount HttpRequestButton Get Test 
      Finish") 
     ); 

    } 

}