Angular6：无法访问模板中的js变量获取异步数据答案

【问题标题】：Angular6: Unable to access js variable in template getting async dataAngular6：无法访问模板中的js变量获取异步数据
【发布时间】：2019-09-08 21:16:37
【问题描述】：

我正在尝试在模板上打印 razorpay 提供的银行列表我得到所有银行列表对象作为响应并将其保存在变量银行中，但是这个变量在模板中没有任何作用，即我看不到任何值

我试图打印下面的代码，但我永远看不到 Hello 得到打印

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

下面是我来自component.ts的sn-p

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
        })
      };
    }
  }

【问题讨论】：

标签： javascript angular typescript razorpay

【解决方案1】：

   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，填充正确的组件属性。

更多关于...“this”的阅读：

【讨论】：