In short, I have a page with a JS Google map and a control (select dropdown). Let’s say that this page is the 3rd page users would get to while following the application flow. After selecting an option from the dropdown (the value for ex, abc), they would be navigated through a few more pages before going back to the root page (not by hitting back button or swipe back but directly from the last page, a complete cycle). Everything works well for the 1st cycle but now if I try to go through another cycle, I got a problem with the select dropdown in the 3rd page. The value of the select dropdown will stick to the last one (abc) that I have chosen in the 1st cycle and wont agree to change no matter which option I switch to. I dont really know if I have missed something and what can be done to fix this. Any help will be really appreciated. Thank you.
HTML code for the select component:
<select id="diemGiaoDichSelected" (change)="diemGiaoDichChanged();">
<option value="" disabled selected hidden>Chọn Tỉnh Thành Phố</option>
<option *ngFor="let khuvuc of diemGiaoDich" [value]="khuvuc.code">{{khuvuc.name}}</option>
</select>
The function that will be triggered on onchange event, basically I just output the selected value (x.value) to the console for testing.
diemGiaoDichChanged() {
// this.map.panTo( new google.maps.LatLng( 10, 12 ) );
var x=document.getElementById('diemGiaoDichSelected') as HTMLSelectElement;
console.log(x.value);
let promise = new Promise((resolve, reject) => {
this.loading = this.loadingCtrl.create({
content: 'Xin Đợi Trong Giây Lát...'
});
this.loading.present();
let apiURL = 'https://api.myjson.com/bins/wsref';
this.http.get(apiURL)
.toPromise()
.then(
res => { // Success
this.khuvucTest = res.json().result;
this.loading.dismiss();
resolve();
}
)
.catch((error) => {
this.loading.dismiss();
alert("Không Xử Lý Được! Vui Lòng Kiểm Tra Lại Kết Nối Mạng Của Bạn.")
console.error('API Error : ', error.status);
console.error('API Error : ', JSON.stringify(error));
reject(error.json());
});
});
return promise;
}
In the last page, I navigate back to the Rootpage after a user has completed the whole process. Tried Push, PoptoRoot and setRoot but ended up with the same result.
showAlert() {
let alert = this.alertCtrl.create({
title: 'Quý khách đã đặt lịch giao dịch thành công',
subTitle: 'Kính mời quý khách đến cửa hàng 80 Nguyễn Du, P.Bến Nghé, Q1 vào lúc 08:30 - 09:00 ngày 06/03/2018 để tiến hành giao dịch',
buttons: [{
text: 'OK',
handler: () => {
let notification = {
id: 1,
title: 'Thông báo thử nghiệm',
text: 'Cảm ơn bạn đã sử dụng dịch vụ của VNPT, xin vui lòng dành ít phút để đánh giá dịch vụ!',
at: new Date(new Date().getTime() + 5 * 1000)
};
this.localNotifications.schedule(notification);
this.navCtrl.push(HomePage);
}
}]
});
alert.present();
}