Angular4 How can I call service method in closure

Question

I want to use a service object in callback method. I get undefined error when I use the service in callback method. How can I solve it?

send.component.ts

import { Component } from '@angular/core';

import { ExampleService } from '../../services/example.service';

@Component({
  selector: 'example',
  templateUrl: './send.component.html',
  styleUrls: ['./send.component.css']
})
export class SendComponent {
  public exampleService = null

  constructor(private service: ExampleService) {
    this.exampleService = service
  }

  submit() {
    function postSendTransactionCallback(result) {
      console.log(this.exampleService); // exampleService is undefined
    }

    this.exampleService.postSendTransaction(this.data, postSendTransactionCallback); // This is no problem
  }
}

score 1 · Accepted Answer · answered Oct 08 '17 at 18:39

1

Use Arrow function while defining postSendTransactionCallback

submit() {
    let postSendTransactionCallback = (result) => {
      console.log(this.exampleService);
    }
    this.exampleService.postSendTransaction(this.data, postSendTransactionCallback);
}

Use .bind(this) like below without changing postSendTransaction method

this.exampleService.postSendTransaction(
  this.data, postSendTransactionCallback.bind(this)
);

answered Oct 08 '17 at 18:39

Pankaj Parkar

134,766
23
234
299

Thank you. You saved me. I'll accept your answer in 2 min. – zono Oct 08 '17 at 18:50

score 1 · Answer 2 · answered Oct 08 '17 at 18:41

1

User arrow function because javascript arrow(=>) function bind the scope with it where it is defined:

 submit() {
    this.exampleService.postSendTransaction(this.data, (result) => {
      console.log(this.exampleService); // 
    }); 
  }

answered Oct 08 '17 at 18:41

asmmahmud

4,844
2
40
47

Angular4 How can I call service method in closure

2 Answers2