Ionic httpClient ответ использовать тост - PullRequest
Новая
       7

Ionic httpClient ответ использовать тост

0 голосов
/ 20 мая 2018

я отправляю данные для входа в службу, после получения ответа в login.ts тост не определен, как решить эту проблему?

я пробую свою функцию тоста в другой функцииВ состоянии работы службы

это моя функция для службы загрузки 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мой сервис 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){

    }
}

после запуска возникла ошибка, подобная этой: TypeError: Невозможно прочитать свойство 'toastCtrl' из неопределенного

1 Ответ

0 голосов
/ 20 мая 2018

В этом случае это проблема с вашей ссылкой this в вашем login.ts . 

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

this ссылается на анонимную функцию в вашем then block, но вы хотите вернуться к своему LoginComponent классу.

Как решить эту проблему?

Вы можете использовать функции стрелок, которые действительно популярны, верносейчас. 

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