2017-06-14 2 views
0

私はワイヤカードの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 

をなくなっている。

今私は少し失われています。私のコンテキストを取り戻すにはどうすればよいですか、あるいはこの問題の別の解決策がありますか?

答えて

2

onSuccess: this.formCreated,を実行したときに、関数の参照をコールバックとして渡しています。この関数内のthisは、この関数がどこから呼び出されたかによって異なります。

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

はあなたが行うことができます別のオプションを使用することである:thisは常にあなたの現在のクラスを参照していることを確認するために、あなたはthisとしてPaymentAddCreditcardPageインスタンスとformCreatedが常に呼び出されることを確認します。このような何かを行うことができますFunction.bindを明示的に指定するコンテキスト:活字体でFunction.bindを使用した場合

onSuccess: this.formCreated.bind(this) 

をしかし、注意して、結果の関数は、型指定なしとなります。 https://github.com/Microsoft/TypeScript/issues/212

+0

Thxをを参照してください、私はこの回答で解決策を自分で見つけ https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback しかし、 )あなたは 'onSuccess:(data)=> this.formCreated(data)を使って、 'トリックをしました。 – Gesh

関連する問題