Невозможно установить значение глобальных переменных в ответе RazorPay - PullRequest
0 голосов
/ 30 июня 2019

Я пытаюсь использовать пользовательскую проверку RazorPay.

Ожидаемое поведение
netBankingKeys заполнен массивом банков
извлечено изменено с ложного на истинное

Что происходит
первая функция setTimeout выводит неопределенное значение
вторая функция 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)


  }

1 Ответ

0 голосов
/ 30 июня 2019

сервис для доступа к собственному окну браузера

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)

  }

}
...