İyonik 2 - Modeldeki değişiklikler görünümde güncellenmiyor/UI

Question

Bir bileşenin içindeki bir özellikteki değişiklikleri, UI'den bir olayı tetiklemeden gerçek görünüme nasıl yayılabileceğimi anlamakta zorlanıyorum. İleri geri gidersem kullanıcı arayüzü güncellenir.

Bu, BLE'yi her saniye bildiren bileşenimdir. Her bildirimin ardından bildirimin sonuç değerinin görünümde güncellenmesi gerekir. Geliştirici konsolunda görünen bildirimleri görebilirim.

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

karşılık gelen 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> 

Eklendi Kök Sayfa 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 
    }); 
} 
} 

ve ilgili HTML denir yerden göstermek için

Değişiklik algılama ile denemeyi denedim, ancak markForCheck() bir istisna sonuçlandı. Ben doğrudan NgZone kullandığımda benzer TypeError gösterilir.

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

Ben son Ionic2 Beta kullanıyorum. Burada yanlış yaptığım bir şey var mı?

sayesinde Jens

Answer 1

Sen `sadece yapıcı gelen başka bir yerden de (kodunuzu gösterilmiştir) veya()

return [[NavParams],[NavController],[ChangeDetectorRef]];