Question

我是离子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>

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

金额：{{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方法，只是一个开关并修改变量钱的值

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

离子2：变量被修改但在视图HTML中没有变化

1 个答案: