Angular 2におけるコールバック関数とデータバインディングがリアルタイムで更新できない問題について
6600 ワード
angular 2でスキャンインタフェースを呼び出し、次のように値を配列に正しく追加できます.
ただし、ページにバインドされているデータは、リアルタイムで更新できません.つまり、コールバック関数で変化する値をリアルタイムでページに更新する方法を教えてください.
A:コールバック関数はAngular 2のzoneから飛び出しているので、ChangeDetectorを注入し、Angular 2フレームワークを明示的に通知する必要がある
Angular 1と同様に更新.xのapply():次のように正しく処理した後にコードを探します.
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);
});
}
ただし、ページにバインドされているデータは、リアルタイムで更新できません.つまり、コールバック関数で変化する値をリアルタイムでページに更新する方法を教えてください.
*ngIf="records.length>0">
- *ngFor="#record of records">{{record.format}} : {{record.text}}
A:コールバック関数はAngular 2のzoneから飛び出しているので、ChangeDetectorを注入し、Angular 2フレームワークを明示的に通知する必要がある
Angular 1と同様に更新.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