typescript - importar - pasar parametros entre componentes angular 2
Angular 2+Ionic 2+Barcode Scanner DOM no se actualiza en el cambio de enlace (2)
Intenta usar Zone. Puede encontrar la discusión sobre esto aquí https://forum.ionicframework.com/t/taken-image-from-camera-not-able-to-show-in-ui/44487
Estoy atrapado tratando de acceder a un enlace desde dentro de una función de éxito. Este es el código tal como lo tengo:
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();
}
}
Cuando el escáner ha escaneado, debe actualizar la variable ''código de barras'' al código de barras escaneado. Sé que el escáner está funcionando porque registra la salida con éxito.
El problema es que el DOM no se está actualizando en absoluto. La plantilla HTML es:
<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>
También he intentado usar:
<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>
También intenté incluir una función de tiempo de espera ya que algunas personas han dicho que podría tratarse de un error angular. Así que intenté:
setTimeout(() => this.barcode = result.text, 1);
Sin ningún éxito. No se muestra ningún mensaje de error y creo que al depurar en la consola de safari dev se hace referencia a "esto" de forma correcta y accesible (usando un dispositivo que no está en el navegador. ¡Sé que cordova no funciona en un navegador de PC!).
Editar: Entonces, después de llamar a console.log (this.barcode); inmediatamente después de this.barcode = result.text; ¿He descubierto que no está actualizando la variable? ¿Por qué sería esto?
Editar 2: ahora está actualizando. No se actualiza si lo envuelvo en una función de tiempo de espera así que supongo que no está actualizando la variable original desde la función de éxito.
Asegúrese de que la asignación se ejecuta en la zona de Angulars:
import {Component, Input} from ''angular2/core'';
...
constructor(public _viewCtrl: ViewController, _platform: Platform, private zone:NgZone){ ... }
...
this.zone.run(() => this.barcode = result.text;);
Ver también