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
.ts


ngOnInit() {

    this.razorpay = new Razorpay({

      key : 'XXXXXXX',

      key_secret: 'XXXXXXXXX'

    })

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

      this.banks = response.methods.netbanking
      console.log(this.banks)
      this.display= true
      console.log(this.display)


    })

  }

html

<ul *ngIf="display"> 

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

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

  </li>

</ul>

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
      console.log(this.ban

1 Like

It is working. thank you

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

1 Like