Hello,
Button runs correctly on ionic serve. But when I run it on iOS iPhone the button icon changes but the text doesn’t.
I have to minimize the app and reopen it for the text to change.
The video link showing the behavior is below
https://drive.google.com/file/d/0B0wDErI-zl_HZzVER3JocWlVc3M/view?usp=sharing
customize.ts
import { Component, NgZone } from '@angular/core';
import { NavController, NavParams, AlertController, ViewController } from 'ionic-angular';
import { ConnectPage } from '../connect/connect';
import { BLE } from '@ionic-native/ble';
@Component({
selector: 'page-features',
templateUrl: 'customize.html'
})
export class CustomizePage {
public value;
label: any;
public connected;
public characteristic = null;
public service = null;
public dataQueue = [];
box1: boolean;
box2: boolean;
box3: boolean;
box4: boolean;
box5: boolean;
box6: boolean;
constructor(public navCtrl: NavController, public navParams: NavParams, public ble: BLE, private alertCtrl: AlertController, private viewCtrl: ViewController, public zone: NgZone) {
this.connected = this.navParams.get('connected');
this.characteristic = this.navParams.get('characteristic');
this.service = this.navParams.get('service');
this.value = false;
this.label = "ON";
if (this.connected == undefined || this.connected == '' || this.connected == null) {
let alert = this.alertCtrl.create({
title: 'WARNING!',
subTitle: 'Please Connect Soles',
buttons: [{
text: 'Ok',
handler: () => {
alert.dismiss();
this.GotoBack();
return false;
}
}]
});
alert.present();
}
}
ionViewDidLoad() {
console.log('ionViewDidLoad CustomizPage');
this.viewCtrl.showBackButton(false);
}
GotoBack() {
this.navCtrl.setRoot(ConnectPage);
}
stringToArrayBuffer(str) {
let ret = new Uint8Array(str.length);
for (let i = 0; i < str.length; i++) {
ret[i] = str.charCodeAt(i);
}
return ret.buffer;
}
writeToDevice(dest, val) {
this.dataQueue.push(this.stringToArrayBuffer(dest + val));
if (this.dataQueue.length > 0 && this.connected !== null && this.connected != undefined) {
let d = this.dataQueue.shift();
this.sendData(d);
}
}
sendData(data) {
this.ble.writeWithoutResponse(this.connected.id, this.service, this.characteristic, data).then((response) => {
//alert("send ko " + response);
}, error => {
this.presentToast(error);
});
}
presentToast(message) {
let alert = this.alertCtrl.create({
title: 'WARNING!',
subTitle: message,
buttons: ['OK']
});
alert.present();
}
sendBox(event, value) {
if (event) {
this.writeToDevice("", value);
} else {
let i = value;
let Offvalue = i + '' + value;
this.writeToDevice("", Offvalue);
}
}
sendColor(color) {
this.writeToDevice("", color);
}
toggle(o) {
this.zone.runOutsideAngular(() => {
setTimeout(() => {
if (o) {
this.value = false;
this.label = "OFF";
this.writeToDevice("", "on");
} else {
this.value = true;
this.label = "ON";
this.writeToDevice("", "off");
}
}, 5);
});
}
}
customize.html
<ion-header>
<ion-navbar color="primary">
<ion-buttons left>
<button ion-button (click)="GotoBack()">
<ion-icon class="ose-arrow-point-to-left"></ion-icon>
</button>
</ion-buttons>
<ion-title>Customize</ion-title>
<ion-buttons end>
<button ion-button menuToggle>
<ion-icon class="ose-logo"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<div class="items">
<ion-row>
<ion-col text-center>
<label>
<input type="checkbox" checked name="boxgroup" [(ngModel)]="value" (click)="toggle(value)">
<!-- <ion-checkbox name="boxgroup" [(ngModel)]="value" (ionChange)="toggle(value)"></ion-checkbox> -->
<div class="content">
<div class="icon-box">
<ion-icon class="ose-bulb"></ion-icon>
</div>
<!-- <span *ngIf="value==true">ON</span><span *ngIf="value==false">OFF</span> -->
<span>{{label}}</span>
</div>
</label>
</ion-col>
</ion-row>
</div>
<ion-card no-shadow card-item style="margin-top: 10px;">
<ion-card-header text-center>
Box Select
</ion-card-header>
<ion-card-content select-box>
<ul clearfix>
<li>
<label>
<input type="checkbox" name="boxgroup" [(ngModel)]="box1" (change)="sendBox(box1,1)">
<div class="radio-content">
<div class="content">
<ion-icon class="ose-cube"></ion-icon>
<h2>1</h2>
</div>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="boxgroup" [(ngModel)]="box2" (change)="sendBox(box2,2)">
<div class="radio-content">
<div class="content">
<ion-icon class="ose-cube"></ion-icon>
<h2>2</h2>
</div>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="boxgroup" [(ngModel)]="box3" (change)="sendBox(box3,3)">
<div class="radio-content">
<div class="content">
<ion-icon class="ose-cube"></ion-icon>
<h2>3</h2>
</div>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="boxgroup" [(ngModel)]="box4" (change)="sendBox(box4,4)">
<div class="radio-content">
<div class="content">
<ion-icon class="ose-cube"></ion-icon>
<h2>4</h2>
</div>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="boxgroup" [(ngModel)]="box5" (change)="sendBox(box5,5)">
<div class="radio-content">
<div class="content">
<ion-icon class="ose-cube"></ion-icon>
<h2>5</h2>
</div>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="boxgroup" [(ngModel)]="box6" (change)="sendBox(box6,6)">
<div class="radio-content">
<div class="content">
<ion-icon class="ose-cube"></ion-icon>
<h2>6</h2>
</div>
</div>
</label>
</li>
</ul>
</ion-card-content>
</ion-card>
<ion-card card-shadow card-item>
<ion-card-content>
<div class="theme-icon">
<ion-icon class="ose-theme"></ion-icon>
</div>
<ul clearfix>
<li>
<label>
<input type="radio" name="color" (change)="sendColor('#0000FF')">
<div class="content text-style blue">
Blue
</div>
</label>
</li>
<li>
<label>
<input type="radio" name="color" (change)="sendColor('#00FFFF')">
<div class="content text-style cyan">
Cyan
</div>
</label>
</li>
<li>
<label>
<input type="radio" name="color" (change)="sendColor('#00FF00')">
<div class="content text-style green">
Green
</div>
</label>
</li>
<li>
<label>
<input type="radio" name="color" (change)="sendColor('#800080')">
<div class="content text-style purple">
Purple
</div>
</label>
</li>
<li>
<label>
<input type="radio" name="color" (change)="sendColor('#FFFFFF')">
<div class="content text-style white">
White
</div>
</label>
</li>
<li>
<label>
<input type="radio" name="color" (change)="sendColor('#FFFF00')">
<div class="content text-style yellow">
Yellow
</div>
</label>
</li>
<li>
<label>
<input type="radio" name="color" (change)="sendColor('#FFC0CB')">
<div class="content text-style pink">
Pink
</div>
</label>
</li>
<li>
<label>
<input type="radio" name="color" (change)="sendColor('#FF0000')">
<div class="content text-style red">
Red
</div>
</label>
</li>
<li>
<label>
<input type="radio" name="color" (change)="sendColor('#FFA500')">
<div class="content text-style orange">
Orange
</div>
</label>
</li>
</ul>
</ion-card-content>
</ion-card>
</ion-content>```
I found this similar article but none of it worked:
https://forum.ionicframework.com/t/ionic2-beta-11-ngif-stops-working-after-view-change/60188