Cannot read property 'alertCtrl' of undefined

Ionic Framework ionic-v3
1

Hello, I have a problem, my alert is giving error, I always do it this way, but it is not working, the error that appears is: Can not read property ‘alertCtrl’ of undefined
Here is the code:

 imports...
 import { NavController, NavParams, ViewController, AlertController} from 'ionic-angular';

 @Component({
   selector: 'page-login',
   templateUrl: 'login.html'
 })
 export class LoginPage {
   constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController, public alertCtrl: AlertController) {

   }

showAlert(){
        let alert = this.alertCtrl.create({
          title: 'lalatest',
          subTitle: '  -------test-------  ',
          buttons: ['Dismiss']
        });
        alert.present();
 }

}

And the html:

<ion-header>
  <ion-navbar color="secondary">
          <ion-title>Login</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
 <ion-list>
      <ion-item>
        <button ion-button block color="secondary" (click)="showAlert()">Alert</button>
      </ion-item>
  </ion-list>
</ion-content>

Please, what I missing
rc.5

the same happens if I use toastCtrl

2

Did you ever figure this out? This weird error has suddenly popped up on my app.

3

Please post the providers stanza of your app module.

4

import {Injectable} from ‘@angular/core’;
import {Http, Headers, RequestOptions} from ‘@angular/http’;
import {AlertController} from ‘ionic-angular’;
import ‘rxjs/add/operator/map’;
import {Observable} from ‘rxjs/Rx’;

declare var OAuth: any;

@Injectable()
export class MusicService {

spotifyCredentials: any = '';

constructor(public http: Http, public tools: Tools, public alertCtrl: AlertController) {

}

loginSpotify () {
		
		OAuth.popup('spotify', {cache: true}).done(function(result) {
			console.log(result);

			let token = result.access_token;
			let refreshToken = result.refresh_token;
			
			this.spotifyCredentials = result;
			console.log(this.spotifyCredentials);

			let alert = this.alertCtrl.create({
				title: 'Connected',
				subTitle: 'Your account is now connected to Spotify.',
				buttons: ['OK']
			  });
			  alert.present();
			})
			.fail(function (err) {
				//handle error with err
				console.log('error me', err);
				this.spotifyCredentials = '';
				OAuth.clearCache('spotify');
				let alert = this.alertCtrl.create({
					title: 'Error',
					subTitle: 'Unable to Connect Your Spotify Account.',
					buttons: ['OK']
				  });
				alert.present();
			});
				
}

}

5

thanks for trying to help out! I think it is actually not an ionic/angular issue but might have to do something with the OAuth variable being from an external library and my local variables are not getting passed into the function. Do you know how to fix that?

6

Google “fat arrow function”.

1 Like
7

hmm I may not be thinking properly but I still havent figured it out. I tried using fat arrow functions for the done and fail functions and also tried changing everything to function expressions. I have multiple functions like this and either something I injected (ie. alertCtrl) or a this.* variable ends up being undefined.

Can you help me a bit more explicitly in terms of what to change? Thanks!

8

const and this don’t mean what you think they mean in Javascript. In this situation, this will change its meaning depending on whether it’s inside a fat arrow function or a function(){} type of function. It would help you a lot to spend some time learning ES6 and TypeScript before getting deeper into Ionic.

1 Like
9

Thanks I will look to get more knowledgeable about ES6 and Typescript and then try to address this.

10

Cool. The magic phrase you need to understand what’s going on with your this.alertCtrl is “lexical scope.” Once you understand how ES6 handles the scope of this, your life will get a lot easier.

1 Like
11

Thanks, I read a few articles …some of which seemed conflicting, but I finally got it working. Thanks!