Ionic 2 -对模型的更改不会在视图/ UI中更新

Ionic 2 - Changes to Model are not updated in the view / UI

本文关键字:视图 UI 更新 模型 Ionic      更新时间:2023-09-26

我很难理解如何在不触发UI事件的情况下将组件中的属性更改传播到实际视图。如果来回切换,UI就会更新。

这是我的组件,它每秒检索一个BLE通知。通知的结果值需要在每次通知之后在视图中更新。我可以看到通知出现在开发者控制台中。

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-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:

<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>

我已经尝试过变更检测,但markForCheck()导致异常。当我直接使用NgZone时,也会出现类似的TypeError。

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

我用的是最新的Ionic2 Beta。知道我哪里做错了吗?

谢谢,Jens

需要将ChangeDetectorRef添加到参数

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