Ionic 4 unable to display data inside ngFor

I am trying to fetch payment methods from razorpay payment gateway. But unable to display it. The problem is there is no data available at the time of display. How do I wait for data to load? Thank you in advance

ngOnInit() {

    this.razorpay = new Razorpay({

      key : 'XXXXXXX',

      key_secret: 'XXXXXXXXX'


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

      this.banks = response.methods.netbanking
      this.display= true




<ul *ngIf="display"> 

  <li *ngFor="let hero of banks | keyvalue | async ">

    {{ hero.key }}: {{ hero.value }}



Here is the image of my console.logs. It consists of values of variable “bank” and variable “display”

test without <ul *ngIf=“display”>, I think it is not necessary because ngFor will update the corresponding content when value will become not null.

Don’t use function but only fat arrow as a call back, as you will not be able to link to the object’s data. So binding is likely to fail too.

this.razorpay.once('ready', (response) => {

      this.banks = response.methods.netbanking

1 Like

It is working. thank you

welcome. Never use function. Until you know when you can.

1 Like