Ionic httpClient response use toast

Question

i send login data to service, after get response in login.ts toast is not difined, how to resolve this ?

i try my toast function in another function withot condition in service its work

this my function for load service login.ts:

import { Component, OnInit } from '@angular/core';
import { NavController, MenuController, PopoverController } from "ionic-angular";
import { TabsInfluencerComponent } from '../../influencer/tabs/tabs';
import { RegisterComponent } from '../register/register';
import { ResetComponent } from '../reset/reset';
import { OfferComponent } from '../../advertiser/offer/offer';
import { ngForm } from '@angular/forms';
import { AuthService } from '../../../services/auth';
import { ToastController } from 'ionic-angular';



@Component({
    templateUrl: 'login.component.html',

})

export class LoginComponent implements OnInit {

    constructor(
        public nav:NavController, 
        public menu:MenuController, 
        public popover: PopoverController, 
        private AuthService : AuthService, 
        private toastCtrl: ToastController) {

    }   

    responseData : any;
    public isChoose: boolean = false;
    public isshowP: boolean = false;
    //login and get data in service
    login(form: ngForm){
        this.AuthService.login(form.value.email, form.value.password)
        .then(function(data) {
            if(data.success == true){
                localStorage.setItem('userToken',data.token);
                localStorage.setItem('userData',JSON.stringify(data.user));
            }else{
                let toast = this.toastCtrl.create({
                  message: data.error,
                  duration: 3000
                });
                toast.present();
            }
        })
        .catch(function(error) {
            console.log(error);
        })
    }


}

this my service auth.ts:

    import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { map } from 'rxjs/operators'


@Injectable()
export class AuthService {
    private loginUrl : string = 'http://localhost:8000/api/login';
    data : any;
    constructor(private http: HttpClient){}
    //function for login
    login(email : string, password :string){
        const body = {email : email, password : password};
        return new Promise(resolve => {
          this.http.post(this.loginUrl, body)
            .subscribe(data => {
              this.data = data;
              resolve(this.data);
            });
        });
    }

    register(email : string, password :string){

    }
}

after run i have error like this : TypeError: Cannot read property 'toastCtrl' of undefined

Answer 1

In this case it is a problem with your this reference in your login.ts.

.then(function(data) {
    ...
    let toast = this.toastCtrl.create({
        message: data.error,
        duration: 3000
    });
    ...
})

The this is referring the anonymous function in your then block, but you want to refer back to your LoginComponent class.

How to solve this?

You could use arrow functions, that are really popular right now.

.then((data) => {
    ...
    let toast = this.toastCtrl.create({
        message: data.error,
        duration: 3000
    });
    ...
})