UI에서 이벤트를 트리거하지 않고 구성 요소 내의 속성에 변경 사항을 실제 뷰로 전파 할 수있는 방법을 이해하는 데 어려움이 있습니다. 앞뒤로 이동하면 UI가 업데이트됩니다.이오닉 2 - 모델 변경 사항이 뷰/UI에서 업데이트되지 않았습니다.
이것은 매초 알림을 검색하는 구성 요소입니다. 알림의 결과 값은 각 알림 후에보기에서 업데이트해야합니다. 개발자 콘솔에 알림이 표시됩니다.
import { Component, ChangeDetectionStrategy, ChangeDetectorRef, Input, Output} from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { BLE } from 'ionic-native';
import {Observable} from 'rxjs/Observable';
@Component({
templateUrl: 'build/pages/devices/devices.html',
//changeDetection: ChangeDetectionStrategy.OnPush
})
export class DevicePage {
private nav:NavController = null;
private navParams:NavParams = null;
private device:any;
private connecting:any;
private characteristics:any;
private data:any;
private temp:any;
static get parameters() {
return [[NavParams],[NavController]];
}
//
constructor(navParams, nav, private cd:ChangeDetectorRef) {
this.nav = nav;
this.navParams = navParams;
this.device = this.navParams.get('device');
this.connect(this.device.id);
}
connect(device) {
/*
var service = "6e524635-312d-444b-2020-202020202020";
var characteristic_read = "6e524635-312d-444b-2062-7574746f6e20";
var characteristic_write = "6e400002-b5a3-f393-e0a9-e50e24dcca9e"
*/
var bleUART = "6e400001-b5a3-f393-e0a9-e50e24dcca9e";
var RXD = "6e400003-b5a3-f393-e0a9-e50e24dcca9e";
var TXD = "6e400002-b5a3-f393-e0a9-e50e24dcca9e";
//this.hello = "Hello";
BLE.connect(device).subscribe(
peripheralData => {
console.log("Connect:" + JSON.stringify(peripheralData));
BLE.startNotification(device, bleUART, RXD).subscribe(
buffer => {this.temp = String.fromCharCode.apply(null, new Uint8Array(buffer));
// this.cd.markForCheck();
this.cd.detectChanges();
console.log("Data: " + this.temp);
},
error => {console.log("Error Notification" + JSON.stringify(error));
})},
error => {console.log("Error Connecting" + JSON.stringify(error));})
}
}
대응하는 HTML :
<ion-navbar *navbar>
<ion-title>
Devices
</ion-title>
<ion-buttons end>
<button (click) = "startScanning()">Scan</button>
</ion-buttons>
</ion-navbar>
<ion-content>
<ion-list insert>
<ion-item-sliding *ngFor="#device of devices" #slidingItem>
<button ion-item (click)="connectToDevice(device)">
<h2>{{device.name}}</h2>
<p>{{device.id}}</p>
<p>{{device.rssi}}</p>
</button>
</ion-item-sliding>
</ion-list>
<ion-spinner *ngIf="isScanning==true" name="circles"></ion-spinner>
</ion-content>
:
<ion-header>
<ion-navbar>
<ion-title>
Hotplate Status
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<h2>Connected Device:</h2>
<p>{{device.name}}</p>
<h1>Temperature:</h1>
<p>{{temp}}</p>
</ion-content>
추가 루트 페이지는 connect()
이
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { DevicePage } from '../devices/devices';
import { BLE } from 'ionic-native';
@Component({templateUrl: 'build/pages/home/home.html'})
export class HomePage {
private nav:NavController = null; // please add this line as default generated page plus the --ts option on command line.
private devices:any;
private isScanning:any;
static get parameters() {
return [[NavController]];
}
constructor(nav:NavController) {
this.nav = nav;
this.devices = [];
this.isScanning = false;
}
startScanning() {
console.log('Scanning Started');
this.devices = [];
this.isScanning = true;
BLE.startScan([]).subscribe(device => {
this.devices.push(device);
});
setTimeout(() => {
BLE.stopScan().then(() => {
console.log('Scanning has stopped');
console.log(JSON.stringify(this.devices))
this.isScanning = false;
});
}, 5000);
}
connectToDevice(device) {
console.log('Connect To Device');
console.log(JSON.stringify(device))
this.nav.push(DevicePage, {
device: device
});
}
}
하고 해당 HTML이라고 곳에서 보여
변경 감지를 시도했지만 예외가있는 markForCheck()
이 발생했습니다. 비슷한 TypeError는 NgZone을 직접 사용할 때 표시됩니다.
Uncaught TypeError: Cannot read property 'markForCheck' of undefined(anonymous function) @ app.bundle.js:84SafeSubscriber.__tryOrUnsub @ app.bundle.js:94435SafeSubscriber.next @ app.bundle.js:94384Subscriber._next @ app.bundle.js:94334Subscriber.next @ app.bundle.js:94298cordova.callbackFromNative @ cordova.js:293processMessage @ cordova.js:1081processMessages @ cordova.js:1104pollOnce @ cordova.js:973pollOnceFromOnlineEvent @ cordova.js:960
덕분에, 옌스
당신이'연결 호출 마십시오 PARAMS하는
ChangeDetectorRef
를 추가 할 필요가? –아니요,'connect()'는 생성자에서만 호출됩니다. 초기 게시물을 편집하고 javascript와 html을 모두 추가했습니다. –