Búsqueda de sitios web

typescript - Angular 2 + Ionic 2 + Escáner de códigos de barras DOM no se actualiza al cambiar la vinculación

Estoy atascado 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 haya escaneado, debería estar actualizando la variable 'barcode' con el 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é envolverlo en una función de tiempo de espera, ya que algunas personas han dicho que podría ser un error de 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, según la depuración en la consola de desarrollo de Safari, "this" está referenciado correctamente y accesible (usando un dispositivo, no 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 se está actualizando la variable? ¿Por qué sería esto?

Edición 2: Así que ahora se está actualizando. No se actualiza si lo envuelvo en una función de temporizador, así que supongo que no se está actualizando la variable original desde dentro de la función de éxito?

Respuesta #1

Asegúrese de que la tarea se ejecute en la zona de Angular:

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

  • https://angular.io/docs/ts/latest/api/core/NgZone-class.html
  • Activar la detección de cambios de Angular2 manualmente

Artículos relacionados