Changed variable not updating in view

Ionic Framework ionic-v3
#1

This is probably a newbie question but I’m very new to Ionic 2 and angular 2.

I need to check if Apple’s HealthKit is available on the user’s device. Why is the variable this.healthKitAvailable not updating in the view? The plugin is working and in the console I can see that the success callback fired.

Or do you guys suggest an entirely different approach?

Thanks :slight_smile:

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  healthKitAvailable: boolean = false;

  constructor(public navCtrl: NavController, public platform: Platform) {
    this.platform = platform;
  }

  ionViewWillEnter() {

    this.platform.ready().then((readySource) => {
      console.log('Platform ready from', readySource);

      // Check if user is running iOS
      if(this.platform.is('ios')) {
        console.log('Platform is iOS');

        // Check if HealthKit is available
        window.plugins.healthkit.available(
          () => {
            // Success
            console.log('HealthKit is available');
            this.healthKitAvailable = true;
          },
          () => {
            // Error
            console.log('HealthKit is NOT available');
          }
        );
      }
    });

  } // ionViewWillEnter()

}

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>

  <!-- HealthKit is not available -->
  <div *ngIf="!healthKitAvailable">
    HealthKit is not available
  </div>

  <!-- HealthKit is available -->
  <div *ngIf="healthKitAvailable">
    <p>HealthKit is available</p>
  </div>

</ion-content>

System information:

Cordova CLI: 6.3.1
Gulp version:  CLI version 1.2.1
Gulp local:
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
ios-deploy version: 1.9.0
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v5.11.0
Xcode version: Xcode 8.0 Build version 8A218a
#2

Could it be that this in your callback is referring to the callback function, rather than your HomePage class?

Try to do let _this = this under your Platform ready from console log and then do _this.healthKitAvailable = true in your callback?

#3

Thank you very much for your help, I appreciate it very much!

Unfortunaltely it doesn’t work either. As far as I know this workaround isn’t required anymore when using () => {...} (and I can access this.healthKitAvailable in the callback without any problems).

#4

Did you figure it out? I’m having a similar problem.

#5

I think this is the same problem I have now.

Did you solve it?
Thank you

cld

#6

Had to use document.getElementById('id_tag').innerHTML to solve my problem with ionic6 and angular12.

I can’t understand the issue ! i’ve tried every possible solution …

CASE:
i have a virtual numeric keyboard inside the ion-popver component.
A local variable is used to register user inputs on the keypad, i can see the variable data on the console but impossible to display it in the view with all possible binding methods …

#7

When angular is not able to catch changes then the angular way is to wrap the relevent event catcher in a zone. Or what I have done, trigger a change detection cycle manually

Using getElementBYID could potentially put you in a fight with angular when chaning the value simultanously. The angular way to adres dom element is stricly spoken ViewChild

But only when normal binding fails and the first mentioned option wont work