[英]Angular 2 + Ionic 2 + Barcode Scanner DOM not updating on binding change
我一直试图从成功函数中访问绑定。 这是我拥有的代码:
import {Page, Platform, Modal, NavController, NavParams, ViewController} from 'ionic-angular';
import {Component, Input} from 'angular2/core';
@Page({
templateUrl: 'build/pages/addModal/addModal.html',
directives: []
})
export class addModal {
public barcode: String = '';
static get parameters() {
return [[ViewController], [Platform]];
}
constructor(public _viewCtrl: ViewController, _platform: Platform){
var category = "Grocery";
this.barcode = '';
_platform.ready().then(() => {
this.openScanner();
});
}
openScanner() {
cordova.plugins.barcodeScanner.scan(
(result) => {
console.log('DEBUG || Barcode scanned: ' + result.text);
this.barcode = result.text;
},
(error) => {
alert("Scanning failed: " + error);
}
);
}
close() {
this._viewCtrl.dismiss();
}
}
当扫描仪扫描时,它应该将变量“条形码”更新为扫描的条形码。 我知道扫描仪正在工作,因为它成功记录输出。
问题是DOM根本没有更新。 HTML模板是:
<ion-item>
<ion-label fixed>Barcode</ion-label>
<ion-input type="text" placeholder="eg. 5058937528594" [value]="barcode" (input)="barcode=$event.target.value"></ion-input>
<button (click)="openScanner()" outline item-right>
<ion-icon name="qr-scanner"></ion-icon>
</button>
</ion-item>
我也试过用:
<ion-input type="text" placeholder="eg. 5058937528594" [value]="barcode"></ion-input>
<ion-input type="text" placeholder="eg. 5058937528594" [(ngmodel)]="barcode"></ion-input>
<ion-input type="text" placeholder="eg. 5058937528594" #barcode></ion-input>
还试图包含一个超时功能,因为有些人说它可能是一个Angular bug。 试过了:
setTimeout(() => this.barcode = result.text, 1);
没有任何成功。 没有显示错误消息,我相信通过safari开发者控制台中的调试,“this”被正确引用和访问(使用不在浏览器中的设备。我知道cordova在PC浏览器上不起作用!)。
编辑:所以在调用console.log(this.barcode)之后; 紧跟在this.barcode = result.text之后; 我发现它没有更新变量? 为什么会这样?
编辑2:所以现在它正在更新。 如果我将它包装在超时函数中它不会更新,所以我猜它不是从成功函数中更新原始变量?
确保赋值在Angulars区域中运行:
import {Component, Input} from 'angular2/core';
...
constructor(public _viewCtrl: ViewController, _platform: Platform, private zone:NgZone){ ... }
...
this.zone.run(() => this.barcode = result.text;);
也可以看看
尝试使用Zone。 你可以在这里找到关于这个的讨论https://forum.ionicframework.com/t/taken-image-from-camera-not-able-to-show-in-ui/44487
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.