Q: 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
  banks : [];

    constructor() {

        this.razorpay = new Razorpay({
          key : 'XXXXXXXXXXX',
          key_secret: 'XXXXXXXX'
        })

        this.razorpay.once('ready', function(response) {
          this.banks = response.methods.netbanking
          console.log(this.banks)
          this.display = true

        })

       }

html
<ul *ngIf="display">
  <li *ngFor="let hero of banks | async">
    {{ hero }}
  </li>
</ul>



A: As your result  console.log(this.banks) is in key value pair.
Your keys are AUBL,ABPB,AIRP,ALLA
You can bind data like this
<ul *ngIf="display">
<li *ngFor="let hero of banks | async">
{{ hero.AUBL }}
{{hero.ABPB}}
//so on
</li>
</ul>


A: With the KeyValuePipe you will be able to iterate over the properties of the object. Remove the async pipe, as you're not working with an observable.
<ul *ngIf="display">
    <li *ngFor="let hero of banks | keyvalue">
        {{ hero.key }}: {{ hero.value }}
    </li>
</ul>

And initialize the banks object correctly as an object instead of an array.
banks = {};

This will give a result like


*

*AUBL: AU Small Finance Bank

*ABPB: Aditya Birla Idea Payments Bank

*...


A: It seems like the API returns Object rather that an Iterable such as Array.
if you need to display each property of such object you would have to transform the object to an array:
constructor() {
    this.banks = [];

    this.razorpay = new Razorpay({
      key : 'XXXXXXXXXXX',
      key_secret: 'XXXXXXXX'
    })

    this.razorpay.once('ready', (response) => {
      let methodsObj = response.methods.netbanking
      this.banks = Object.entries(methodsObj)
      console.log(this.banks)
    })

  }

Then your template is:
<ul>
  <li *ngFor="let hero of banks">
    {{ hero[0] }}, {{ hero[1] }}
  </li>
</ul>


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

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

I have to use arrow (response) => as a callback. By using function() you can't bind object data
