0

我正在尝试使用 RazorPay 的自定义结帐。

预期行为
netBankingKeys充斥着一组银行，
提取的银行从 false 更改为 true

发生了什么
第一个 setTimeout 函数打印 undefined
第二个 setTimeout 函数说该值是 flase
第三个 setTimeout 函数按预期工作

我试图将超时值从 4 秒增加到 20 秒，但netBankingKeys仍然未定义。

ngOnInit() {

    this.razorpay.once('ready', function (response) {

      //Converts the object to array sets the global variable with the value
      this.netbankingKeys = Object.keys(response.methods['netbanking']).map((key) => [{ name: response.methods['netbanking'][key], key: key }]);

      //sets local storage with the stringify value
      localStorage.setItem("banks", JSON.stringify(this.netbankingKeys));

      //flag to say data was fetched initially false
      this.fetched = true
    })

    //prints undefined
    setTimeout(() => { console.log(this.netbankingKeys) }, 4000)
    //prints false
    setTimeout(() => { console.log(this.fetched) }, 4000)

    //works fine
    setTimeout(() => { console.log(localStorage.getItem("banks")) }, 4000)


  }
4

1 回答 1

0

访问本机浏览器窗口的服务

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

function _window() : any {
 // return the global native browser window object
  return window;
}

@Injectable()
export class WindowRef {
  get nativeWindow() : any {
    return _window();
  }
}

组件代码

import { Component, Inject, OnInit } from '@angular/core';
import { WindowRef } from "./core/services/winref.service";
import { Observable } from 'rxjs'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  fetched: Boolean = false;
  rzp: any;
  rzpObservable: Observable<any>;
  netbankingkeys: any[];
  title = 'app';
  options = {
    'key': "rzp_key",
    //other fields if required 
  };


  constructor(private winRef: WindowRef) {
    this.rzp = new this.winRef.nativeWindow.Razorpay(this.options);
    this.rzpObservable = Observable.create((observer: any) => {
    this.rzp.once('ready', (response) => {
      observer.next(response)
      })
    })
  }

  ngOnInit() {

    this.rzpObservable.subscribe((response:any)=>{

    this.netbankingkeys=Object.keys(response.methods['netbanking']).map((key) => [{ name: response.methods['netbanking'][key], key: key }]);
  this.fetched=true;
  })

    setTimeout(() => { console.log(this.netbankingkeys) }, 4000)

    setTimeout(() => { console.log(this.fetched) }, 4000)

  }

}
于 2019-06-30T13:16:32.897 回答