Ioni c 4 не может отображать данные внутри ngFor

Question

Я пытаюсь получить способы оплаты через платежный шлюз razorpay. Но не в состоянии отобразить это. Проблема в том, что на момент отображения нет доступных данных. Как мне ждать загрузки данных? Заранее спасибо .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>

Answer 1

В результате console.log(this.banks) находится в паре ключ-значение.

Ваши ключи AUBL,ABPB,AIRP,ALLA

Вы можете связать данные следующим образом

<ul *ngIf="display">
<li *ngFor="let hero of banks | async">
{{ hero.AUBL }}
{{hero.ABPB}}
//so on
</li>
</ul>

Answer 2

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

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

Я должен использовать стрелку (ответ) => в качестве обратного вызова. Используя функцию () , вы не можете связать данные объекта

Answer 3

Кажется, что API возвращает Object, а не Iterable, такой как 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)
    })

  }

Тогда ваш шаблон:

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

Answer 4

С KeyValuePipe вы сможете перебирать свойства объекта. Удалите асинхронную c трубу, поскольку вы не работаете с наблюдаемой.

<ul *ngIf="display">
    <li *ngFor="let hero of banks | keyvalue">
        {{ hero.key }}: {{ hero.value }}
    </li>
</ul>

И правильно инициализируйте объект банков как объект вместо массива.

banks = {};

Это даст результат, подобный

• AUBL: AU Small Finance Bank
• ABPB: Aditya Birla Idea Payments Bank
• ...