Angular 2 + Ionic 2 + 条码扫描器 DOM 绑定更改时未更新

Question

我无法尝试从成功函数中访问绑定。这是我的代码：

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();
  }
}

当扫描仪扫描后，它应该将变量 'barcode' 更新为扫描的条形码。我知道扫描仪正在工作，因为它成功记录了输出。

问题是 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 错误。所以尝试了：

setTimeout(() => this.barcode = result.text, 1);

没有任何成功。没有显示任何错误消息，我相信通过在 safari 开发控制台中调试可以正确引用 "this" 并且可以访问（使用不在浏览器中的设备。我知道 cordova 不能在 PC 浏览器上工作！）。

编辑：所以在 console.log(this.barcode); 之后立即调用 this.barcode = result.text; 我发现它没有更新变量？为什么会这样？

编辑2：所以现在正在更新。如果我将它包装在超时函数中，它不会更新，所以我猜它不会从成功函数中更新原始变量？

Answer 1

确保作业在 Angulars 区域运行：

import {Component, Input} from 'angular2/core';

...

constructor(public _viewCtrl: ViewController, _platform: Platform, private zone:NgZone){ ... }

...
this.zone.run(() => this.barcode = result.text;);

另见

https://angular.io/docs/ts/latest/api/core/NgZone-class.html

Answer 2

尝试使用区域。你可以在这里找到关于这个的讨论 https://forum.ionicframework.com/t/taken-image-from-camera-not-able-to-show-in-ui/44487

Angular 2 + Ionic 2 + 条码扫描器 DOM 绑定更改时未更新

Angular 2 + Ionic 2 + Barcode Scanner DOM not updating on binding change

typescript

cordova-plugins

ionic2

angular