angular - Angular中的绑定回调函数
问题描述
我将一个外部 js 文件加载到我的 Angular 项目中,其中一个函数是我分配给我的一个函数的回调函数fnBarcodeScanned(scan)
。
当我收到正确扫描的条形码时,一切正常,但下一行没有将条形码分配给我的局部变量this.scanData
。
export class HomeComponent implements OnInit {
scanData: string;
ngOnInit() {
}
fnScanEnable() {
EB.Barcode.enable({ allDecoders: true }, this.fnBarcodeScanned);
this.scanData = "enabled: press HW trigger to capture.";
}
fnBarcodeScanned(scan) {
alert(scan.data);
this.scanData = "barcode: " + scan.data;
}
fnScanDisable() {
EB.Barcode.disable();
this.scanData = "disabled: press 'enable' to scan.";
}
}
如何绑定fnBarcodeScanned(scan)
函数?在我看来,当它被传递给回调时,它失去了与组件的绑定。
解决方案
您可以使用bind()
或arrow function
使用bind()
:
fnScanEnable() {
EB.Barcode.enable({ allDecoders: true }, this.fnBarcodeScanned.bind(this));
this.scanData = "enabled: press HW trigger to capture.";
}
使用arrow function
:
fnBarcodeScanned = (scan) => {
alert(scan.data);
this.scanData = "barcode: " + scan.data;
}
推荐阅读
- elasticsearch - 如何在可视化中使用来自 Kibana 开发工具的 DSL 查询?
- python - 是什么导致我的函数中出现“ValueError:无法将浮点 NaN 转换为整数”
- java - 如何制作自定义滚动条?
- reactjs - 反应:返回函数中的上下文消费者:期望一个赋值或函数调用,而是看到一个表达式.eslint(no-unused-expressions)
- css - 如何在section标签中设置同一张图片的不同背景图片格式(png和webp)
- c# - SystemEvents.LowMemory 事件的替代方案
- python - Python 正则表达式反向引用匹配所有
- https - 使用服务器证书捆绑配置 Keycloak
- c# - 我的 linq 查询没有按预期工作,我做错了什么?
- angular - 带有 oidc-client.js 的 Angular 应用程序需要在第二个选项卡中登录