I’m still new to Ionic but I have started to get the grips of it, however I’m experiencing some odd behaviour and not sure what’s causing it.
I’m using ngif to toggle some content on the page, but in almost always when I open the page for the first time the events don’t fire correctly, if I pop the page from the stack and re-open it everything works smooth as butter.
In the below example I’m expecting the item which has the following condition: <ion-item *ngIf=!havelocation>
to be removed when the variable havelocation
is set to true. I can see from the logs that it does change the value to true, but the item remains visible. If I navigate away from the page, and then open the page again, it works as expected.
I have tried to move the code from constructor
to ionViewDidLoad
, to add timeout but no joy, even wrapped the whole code on page.ready but still the same result.
I get no error at all during compiling or in Javascript console so I’m not sure what I’m doing wrong.
Any suggestion/hint please?
Thank you.
The HTML:
<ion-header>
<ion-navbar>
<ion-title>
Job Card
</ion-title>
</ion-navbar>
</ion-header>
<ion-content style='background:green;'>
<h2 style='text-align:center;color:white;'>{{company}}</h2>
<ion-card>
<ion-item>
<ion-icon name="information-circle" item-left large balanced></ion-icon>
<h3>{{short_address}}</h3>
<p style='overflow:auto;white-space:normal;'>{{long_address}}</p>
</ion-item>
<ion-item>
<ion-icon name="information-circle" item-left large></ion-icon>
<h3>{{short_description}}</h3>
<p style='overflow:auto;white-space:normal;'>{{long_description}}</p>
</ion-item>
<ion-item *ngIf=showrisk>
<ion-icon name="warning" item-left large style='color:red;'></ion-icon>
<h3>Risk Assesment</h3>
<p style='overflow:auto;white-space:normal;'>{{risk_title}}</p>
<button ion-button outline item-right icon-left (click)="itemSelected()">
<ion-icon name="eye"></ion-icon>
View
</button>
</ion-item>
<ion-item *ngIf=!havelocation>
<ion-spinner item-left></ion-spinner>
<p>Loading route...</p>
</ion-item>
<ion-item *ngIf="havelocation && !iserror">
<span item-left [ngClass]="{'my_green': step=='1','my_orange': step=='2','my_red': step=='3'}">{{traveltime}}</span>
<span item-left>({{distance}})</span>
<button ion-button icon-left clear item-right (click)="Startnagivation()">
<ion-icon name="navigate"></ion-icon>
Start
</button>
</ion-item>
<ion-item *ngIf="havelocation && iserror">
<p>Could not load route...</p>
</ion-item>
</ion-card>
</ion-content>
And this is the TS file:
declare var window: any;
import { Component } from '@angular/core';
import { NavController, AlertController, NavParams, Platform } from 'ionic-angular';
import { Geolocation } from 'ionic-native';
import {InAppBrowser} from 'ionic-native';
import {Http} from '@angular/http';
import { LaunchNavigator,LaunchNavigatorOptions } from 'ionic-native';
@Component({
selector: 'job_card',
templateUrl: 'job_card.html'
})
export class JobCard {
havelocation:boolean=false;
showrisk:boolean=false;
iserror:boolean=false;
distance;
traveltime;
company;
short_address;
long_address;
short_description;
long_description;
risk_title;
risk_pdf;
store_lat;
store_lng;
step;
jobid;
constructor(private platform: Platform ,private navController: NavController, public params:NavParams, private http:Http) {
this.jobid=params.get("jobid");
this.http = http;
}
ionViewDidLoad () {
this.step='1';
var aux=this;
var db = window.openDatabase('mydb', '1.0', 'MyDB', 2 * 1024 * 1024);
db.transaction(function(tx){
var query='SELECT MYWORK.*,JOBDESC.short_desc,JOBDESC.long_desc,RISKDEF.title,RISKDEF.pdf from MYWORK '+
'LEFT JOIN JOBDESC on JOBDESC.id=MYWORK.job_description '+
'LEFT JOIN RISKDEF on RISKDEF.id=MYWORK.risk WHERE scheduleid=?';
tx.executeSql(query, [aux.jobid], function(tx, results) {
var row = results.rows.item(0);
aux.company=row['Comp_Name'];
aux.short_address=row['Short_add'];
aux.long_address=row['Long_add'];
aux.short_description=row['short_desc'];
aux.long_description=row['long_desc'];
if (row['pdf'])
{
aux.risk_title=row['title'];
aux.risk_pdf=row['pdf'];
aux.showrisk=true;
}
aux.store_lat=row['Latitude'];
aux.store_lng=row['Longitude'];
aux.CalculateDistance();
},function(tx,error){
console.log(error);
});
});
}
CalculateDistance()
{
Geolocation.getCurrentPosition().then((position) => {
this.http.get(' https://maps.googleapis.com/maps/api/directions/json?origin='+position.coords.latitude+','+position.coords.longitude+'&destination='+this.store_lat+','+this.store_lng+'&traffic_model=best_guess&departure_time=now&units=imperial&key=MYKEY')
.map(res => res.json())
.subscribe(
data => {
console.log(data);
if (data.status=="OK")
{
this.distance=data.routes[0].legs[0].distance.text;
this.traveltime=data.routes[0].legs[0].duration_in_traffic.text;
if (data.routes[0].legs[0].duration_in_traffic.value<=data.routes[0].legs[0].duration.value*1.1)
this.step='1';
else if (data.routes[0].legs[0].duration_in_traffic.value<=data.routes[0].legs[0].duration.value*1.25)
this.step='2';
else
this.step='3';
this.havelocation=true;
}
},
err =>
{
this.iserror=true;
this.havelocation=true;
console.log("There was an error, let's try again in 30 seconds");
}
);
}, (err) => {
this.iserror=true;
this.havelocation=true;
});
}
itemSelected()
{
var url = 'https://docs.google.com/viewer?url=' + encodeURIComponent("http://www.example.com/"+this.risk_pdf+".pdf");
let browser = new InAppBrowser(url,'_blank');
}
Startnagivation()
{
if (this.platform.is('android'))
{
let options: LaunchNavigatorOptions = {
launchMode: "turn-by-turn"
};
LaunchNavigator.navigate([this.store_lat, this.store_lng],options);
}
else
LaunchNavigator.navigate([this.store_lat, this.store_lng]);
}
}