ionic 2 : 变量被修改但在视图 HTML 中没有改变

Question

我是 ionic 2 的新手，我有一个问题，你们可能认为它很容易处理，但我被阻止了。

我有一个变量要显示在我的页面中（在智能手机屏幕上），我将该变量放在 {{ myVar }} 之间，它由屏幕上的 HTML 显示。到这里，没问题。当 myVar 的值因为我按下按钮而改变时，该值也会更新到屏幕上。但是当一个函数确实修改了 myVar 的值时，myVar 的值会在代码中更新（我在 console.log 上看到过），而不是在屏幕视图中。

请大家帮帮我，我没有找到有关此问题的任何信息。也许某处有一个教程可以解释它是如何工作的？

谢谢

编辑：抱歉，我不确定我的源代码是否有帮助，但我们开始吧：

我的代码是这样的，我用 BLE 扫描设备。它显示所有支持 BLE 的设备的结果，我连接到我需要的设备并显示设备提供的所有服务。 （我使用cordova插件BLE）

这是我连接的设备提供的所有服务的 HTML 视图。

<ion-header>
 <ion-navbar>
  <ion-title>{{device.name}}</ion-title>
 </ion-navbar>
</ion-header>
<ion-content>
 <ion-buttons>
  <button ion-button (click) = "disconnect(device.id)" block>Disconnect</button>
 </ion-buttons>
 <ion-card *ngFor="let characteristic of characteristics">
 <ion-card-header>UUID: {{characteristic.characteristic}}</ion-card-header>
<ion-card-content>
  <p>Properties: {{characteristic.properties}}<br>
    Service: {{characteristic.service}} <br>
  <ion-buttons end>
    <button *ngIf="displayNotifyButton(characteristic.properties)== true" ion-button (click)="startNotify(device.id, characteristic.service, characteristic.characteristic)" round>Notify</button>
  </ion-buttons>
</ion-card-content>
</ion-card>
<p>AMOUNT OF MONEY : {{money}}</p>

这里重要的是运行函数 startNotify(...) 的 Notify 按钮。和段落

金额：{{money}}

{{money}} 是在 HTML 视图中被修改但不会改变的变量。

这里是 startNotify 函数：

startNotify(deviceID, serviceUUID, characteristicUUID) {
   this.isNotify = true;
   this.ble.startNotification(deviceID, serviceUUID, characteristicUUID).subscribe(buffer => {
   var dataView = new DataView(buffer);
   var coin = dataView.getUint8(0);
   console.log("## NOTIFY VALUE ## " + coin);
   this.sortCoin(coin);
   console.log('## MONEY ## '+ this.money);
   }, error => {
   console.log("## NOTIFY ERROR ## " + error);
   });
 }

这里是构造函数：

  constructor(public navCtrl: NavController, public navParams: NavParams, private ble: BLE) {
    this.device = this.navParams.get('device');
    console.log("## DEVICE INFORMATION ##" + JSON.stringify(this.device));
    this.connecting = true;
    this.isNotify = false;
    this.connect(this.device.id);
    this.money = 0;
    }

这里是sortCoin方法，只是一个开关，修改变量money的值

sortCoin(value){
 switch (value){
  case 1:
    this.money += 0.1;
    break;
  case 2:
    this.money += 0.2;
    break;
  case 4:
    this.money += 0.5;
    break;
  case 8:
    this.money += 1;
    break;
  case 16:
    this.money += 2;
    break;
  case 32:
    this.money += 5;
    break;
  case 65:
    this.money -= 0.1;
    break;
  case 66:
    this.money -= 0.2;
    break;
  case 68:
    this.money -= 0.5;
    break;
  case 72:
    this.money -= 1;
    break;
  case 80:
    this.money -= 2;
    break;
  case 96:
    this.money -= 5;
    break;
 }
}

所以我的问题是：当设备完成通知时，它会发送一个数组缓冲区，我会对其进行解释并将其发送到方法 sortCoin。在方法 sortCoin 中，变量money 的值被修改了（我可以通过控制台日志看到），但是在HTML 视图中金额没有改变，仍然显示为0，因为money 在构造函数中设置为0。

希望我的源代码能帮助你解决我的问题:)

谢谢

Answer 1

好的，我用 NgZone 解决了我的问题

this.zone.run(() => {
      this.getValueOf2 = data.amount;
    });