关于Angular2中回调函数与数据绑定不能实时更新的问题

最新推荐文章于 2024-02-15 08:00:00 发布

沈斯明

最新推荐文章于 2024-02-15 08:00:00 发布

阅读量5.6k

点赞数 1

分类专栏： angular2.0

angular2.0 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

在angular2中调用扫描接口，现在可以将值正确添加到数组里，如下：

constructor() {
  this.records = [];
}

barcodeScanner() {
  var self = this;
  cordova.plugins.barcodeScanner.scan(function (result) {
    if (!result.cancelled) {
      self.records.unshift(result);
      alert(self.records.length);
    }
  }, function (error) {
    alert("发生了一个错误：" + error);
  });
}

但在页面中绑定的数据，无法实时更新。也就是回调函数中变化的值如何能实时更新到页面中，请多指教！

<ul *ngIf="records.length>0">
  <li *ngFor="#record of records">{{record.format}} : {{record.text}}</li>
</ul>

答：回调函数跑出了Angular2的zone，所以需要注入ChangeDetector，显式地通知Angular2框架
进行更新，类似于Angular1.x中的apply()：如下为正确处理后找码：
import {ChangeDetectorRef} from "angular2/core";

@Page({
  templateUrl: 'build/pages/page1/page1.html',
})
export class Page1 {
  constructor(ref: ChangeDetectorRef) {
    this.ref = ref;
    this.records = [];
  }

  barcodeScanner() {
    var self = this;
    cordova.plugins.barcodeScanner.scan(function (result) {
      if (!result.cancelled) {
        self.records.unshift(result);
        self.ref.markForCheck();
        self.ref.detectChanges();
      }
    }, function (error) {
      alert("发生了一个错误：" + error);
    });
  }
}
经过实践不知何故仅markForCheck依然不能刷新结果。我在markForCheck后面加了detectChanges终于实现将扫描结果返回到页面上了