[英]Angular6: Unable to access js variable in template getting async data
我正在尝试在模板上打印razorpay给定的银行列表,以获取所有银行列表对象作为响应并将其保存在变量bank中,但是此变量在模板中没有任何作用,即我看不到任何值
我尝试在下面的代码中进行打印,但从未看到Hello可以打印
<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
})
};
}
}
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
将与函数本身相关,而不是组件的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”的更多阅读:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.