The http used in the function is undefined. Why?

Question

My Component Source

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

    }
  }

I wonder...

I added the Click event to the addEventListener method.

The http used in the function is undefined. Why? I do not know the reason.

I have to use http inside the function. Is there a way?

use an arrow function instead, and have a read on **this** in javascript. — toskv, Aug 03 '17 at 06:21
Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — AT82, Aug 03 '17 at 06:21
addEventListener is jQuery event so the http function is undefined inside the JQuery block. For button click event just do like this — Sreemat, Aug 03 '17 at 06:23
I would also just use (click)="handler()" in template.. No need for JQuery like element lookup. Then put http inside handler.. Your method would also warrant an ngDestroy to removeEventListener otherwise you'd likely run into memory leaks.. — JGFMK, Aug 03 '17 at 07:31

score 0 · Accepted Answer · answered Aug 07 '17 at 04:27

your code

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

Should be

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

More

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

Johnny Tung · Answer 2 · 2017-08-07T04:49:53.887

This 'this' is not the 'this' you want. You can use arrow function instead or call bind(this) in the end.

 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)

In fact, you should implement that like :

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

    }

}

The http used in the function is undefined. Why?

2 Answers2

More