更多

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")
        );

    }

}

函数中使用的http是未定义的。为什么？

2 个答案:

更多