Angular2 injected service going undefined

Question

I was following this tutorial and reached the below code with searches wikipedia for a given term. The below code works fine and fetches the search result from wikipedia.

export class WikiAppComponent {
      items: Array<string>;
      term = new Control();

      constructor(public wikiService: WikiService) { }

      ngOnInit() {
        this.term.valueChanges.debounceTime(400).subscribe(term => {
          this.wikiService.search(term).then(res => {
             this.items = res;
          })
        });
      }
 }

But when I refactored the and moved the code for search to a separate function it is not working. this.wikiService inside the search function is going undefined. Can you throw some light on why it is going undefined?

export class WikiAppComponent {
      items: Array<string>;
      term = new Control();

      constructor(public wikiService: WikiService) { }

      search(term) {
        this.wikiService.search(term).then(res => {
          this.items = res;
        });
      }

      ngOnInit() {
        this.term.valueChanges.debounceTime(400).subscribe(this.search);
      }
    }

Could you open a debugger in your browser, set a breakpoint in the search method and see what the definition of 'this' is? TypeScript does its best to emulate real class encapsulation, but when you're working with function pointers, the javascript 'this' issue tends to surface, still. — awiseman
– awiseman, Commented May 24, 2016 at 4:51

eko · Accepted Answer · 2016-05-24 04:49:35Z

2

You are having a scope issue, "this" inside your callback is not refering to your page. Change your function callback like this:

this.term.valueChanges.debounceTime(400).subscribe( 
   (term) => {
      this.search(term);
   });

answered May 24, 2016 at 4:49

eko

40.8k11 gold badges79 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 injected service going undefined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related