Angular6: невозможно получить доступ к переменной js в шаблоне при получении асинхронных данных - PullRequest
Новая
       16

Angular6: невозможно получить доступ к переменной js в шаблоне при получении асинхронных данных

1 голос
/ 18 апреля 2019

Я пытаюсь распечатать список банков, указанный razorpay на шаблоне Я получаю все банковские списки Object в ответ и сохраняю его в переменной банках, но эта переменная ничего не делает в шаблоне, т.е. я не вижу никакого значения

Я пытался напечатать приведенный ниже код, и я никогда не смог увидеть Привет, получая печать 

<h2 *ngIf="banks">Hello</h2>

Ниже мой фрагмент из component.ts 

ngOnInit() {
    if (this.common.platformCheck()) {
      var razorpay = document.createElement('script');
      razorpay.id = 'razorPay'
      razorpay.src = 'https://checkout.razorpay.com/v1/razorpay.js';
      razorpay.async = true;
      razorpay.type = "text/javascript";
      var scpt = document.getElementsByTagName('script')[0];
      scpt.parentNode.insertBefore(razorpay, scpt);
      razorpay.onload = () => {
        var options = {
          "key": "rzp_test_XXXXXXXXXXX",
          "image": 'https://i.imgur.com/n5tjHFD.png'
        };
        var razorpay = this.windowObj.Razorpay(options);
         razorpay.once('ready', function (response) {
           this.banks= response.methods.netbanking;
          console.log(response.methods);
          console.log(razorpay.methods.netbanking);
          // response.methods.netbanking contains list of all banks
        })
      };
    }
  }

1 Ответ

2 голосов
/ 18 апреля 2019 
   razorpay.once('ready', function (response) {
       this.banks= response.methods.netbanking;
      console.log(response.methods);
      console.log(razorpay.methods.netbanking);
      // response.methods.netbanking contains list of all banks
    })

Проблема заключается в ключевом слове function, поскольку this, используемый внутри этого функционального блока, будет контекстным для самой функции, а не для this компонента. Просто измените это на: 

   razorpay.once('ready', (response) => {
       this.banks= response.methods.netbanking;
      console.log(response.methods);
      console.log(razorpay.methods.netbanking);
      // response.methods.netbanking contains list of all banks
    })

и это должно работать, поскольку this будет ссылаться на this компонента, заполняя правильное свойство компонента.

Больше прочтений о ... "этом":

...