Ionic class context gone after callback

Question

I'm trying to add the seamless payment integration method of Wirecard into my Ionic 3 application. After the form is created, a callback method (this.formCreated) is called.

There is some logic that needs to be done there, but for now its only purpose is to dismiss the loading animation.

Here is my code:

import { Component } from '@angular/core';
import { Loading, LoadingController, NavController, NavParams } from 'ionic-angular';
import { TranslateService } from '@ngx-translate/core';

import { PaymentService } from '../../providers/payment';

declare var WirecardPaymentPage;

@Component({
  selector: 'page-payment-add-creditcard',
  templateUrl: 'payment-add-creditcard.html'
})
export class PaymentAddCreditcardPage {
  public loader: Loading;

  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              private paymentService: PaymentService,
              private translateService: TranslateService,
              private loadingCtrl: LoadingController) {
    console.log('PaymentAddCreditcardPage');
    this.loader = this.loadingCtrl.create();
    this.loader.present();
  }

  ionViewDidLoad() {
    let requestData = this.paymentService.generateCreditCardRequest();
    WirecardPaymentPage.seamlessChangeLocale(this.translateService.currentLang);
    WirecardPaymentPage.seamlessRenderForm({
      requestData: requestData,
      wrappingDivId: 'wirecard-cc-target',
      onSuccess: this.formCreated,
      onError: this.processErrorResult
    });
  }

  formCreated(data) {
    this.loader.dismiss();
    console.log(data);
  }

  processErrorResult(data) {
    console.log(data)
  }

}

When testing this, it got this error:

Runtime Error
Cannot read property 'dismiss' of undefined

I figured, that also other variables are undefined, so I guess the class context is gone.

So now I'm a bit lost. How do I get my context back or is there another solution for this problem?

score 2 · Accepted Answer · answered Jun 14 '17 at 13:33

When you did onSuccess: this.formCreated,, you are passing a reference of the function as a callback. The this inside this function will vary based on where this function is called from. To ensure that the this always refers to your current class, you can do something like this which will make sure that formCreated is always called with PaymentAddCreditcardPage instance as this:

onSuccess: (data) => this.formCreated(data),

Another option you can do is use Function.bind to explicitly specify the context:

onSuccess: this.formCreated.bind(this)

But be careful when using Function.bind in TypeScript, the resulting function will be untyped. See https://github.com/Microsoft/TypeScript/issues/212

Thx, I just found the solution myself in this answer https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback But you've been lightning fast ;) So using `onSuccess: (data) => this.formCreated(data),` did the trick. — Gesh, Jun 14 '17 at 13:40

Ionic class context gone after callback

1 Answers1