Scenario :
First login page, all the outlets are loaded from the web service. The user enters username, password and select the outlet and click submit. Once authenticated the next page is shown. There the user logs out, ultimately bringing the login page.
Now again all the outlets are loaded from the web service. The user selects the outlets, bang, error Cannot read properties 'input' of undefined
. I have no idea where to look everything is fine, every element is loaded, especially the outlets.
Here's my coding :
login.ts:
ionViewWillEnter() {
this._flag = false;
this._credits = 1;
let loading = this._loadingCtrl.create({
content: 'Connecting to the server...'
});
loading.present();
this._storage.ready().then(() => {
this._outlets = [];
this._storage.get('api').then((url) => {
if (url !== null) {
this._authSrv.setAPI(url);
this._foodSrv.getOutlets(url).subscribe((_outlets) => {
_outlets.forEach(outlet => {
var item = new Outlet(outlet.OltCode, outlet.OltName);
this._outlets.push(item); //I double checked items are getting pushed here
this._flag = true;
});
if (this._flag) {
loading.dismiss();
}
else {
loading.dismiss().then(() => {
this.openSettings();
})
}
})
}
});
});
}
doLogin() {
if (this._username !== undefined && this._password !== undefined && this._foodSrv.getOutletCode() !== undefined) {
let loading = this._loadingCtrl.create({
content: 'Please wait...'
});
loading.present();
this._authSrv.login(this._username, this._password).subscribe(data => {
...
this._authSrv.getUserDetails(this._authSrv.getAPI(), this._username, this._password).subscribe(data => {
...
this._navCtrl.setRoot('HomePage');
});
});
loading.dismiss();
}, (err) => {
this.errorMsg("Invalid _username/_password !");
loading.dismiss();
});
}
else if (this._username === undefined)
this.errorMsg("Empty username !");
else if (this._password === undefined)
this.errorMsg("Empty password !");
else if (this._foodSrv.getOutletCode() === '')
this.errorMsg("Please select an outlet !");
}
//I used this part so that the option is selected once it was clicked
ngOnInit() {
let root = this._viewCtrl.instance._navCtrl._app._appRoot;
document.addEventListener('click', function (event) {
let btn = <HTMLLIElement>document.querySelector('.remove-ok .alert-button-default:nth-child(2)');
let target = <HTMLElement>event.target;
if (btn && target.className == 'alert-radio-label') {
let view = root._overlayPortal._views[0];
let inputs = view.instance.d.inputs;
for (let input of inputs) {
if (input.checked) {
view.instance.d.buttons[1].handler([input.value]);
view.dismiss();
break;
}
}
}
});
}
Options.ts :
logout() {
this.navCtrl.setRoot("LoginPage");
this.navCtrl.popToRoot();
}
Screencast :
Update #1:
I have used this code to make the select with one click Ionic2 Ion-select without OK and Cancel
I also found the issue where it went wrong.
let view = root._overlayPortal._views[0];
let inputs = view.instance.d.inputs;
first time, view is an AlertController, next it was a ViewController. I still have no idea how to rectify this. Any advice would be helpful. Thanks.