Question

我尝试将Wirecard的seamless payment integration方法添加到我的Ionic 3应用程序中。创建表单后，将调用回调方法（this.formCreated）。

有一些逻辑需要在那里完成，但目前它的唯一目的是解除加载动画。

这是我的代码：

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)
  }

}

测试时，出现此错误：

Runtime Error
Cannot read property 'dismiss' of undefined

我想，其他变量也是未定义的，所以我猜类背景已经消失了。

所以现在我有点迷失了。如何获取我的上下文或是否有另一种解决此问题的方法？

Answer 1

当您执行onSuccess: this.formCreated,时，您将该函数的引用作为回调传递。此函数中的this将根据调用此函数的位置而有所不同。为确保this始终引用您当前的类，您可以执行以下操作，以确保始终使用formCreated实例PaymentAddCreditcardPage调用this：< / p>

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

您可以使用Function.bind来明确指定上下文：

onSuccess: this.formCreated.bind(this)

但是在TypeScript中使用Function.bind时要小心，生成的函数将是无类型的。见https://github.com/Microsoft/TypeScript/issues/212

回调之后离子类背景消失

1 个答案: