Sharing data using provider not working

Ionic Framework ionic-v3
1

I’m still fairly new to Ionic. I’m using a provider which is registered in the app.module as a provider for authentication as I’m going to need users id and type throughout the app. In the login page I can see the account.email etc, which are bound to the interface with [(ngModel)]. The provider is also injected in the constructor as a parameter. I.e. constructor(public accountSrv: AccountService) All good.
The provider has set and get methods as well as login & logout. But cannot access any of the data instantiated by the login page, so cannot do login. Console.log logs data as unidentified.
I’m using lazy loading of pages with a blank starter.

Login page is home.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, ToastController } from 'ionic-angular';
import { Account } from './../../models/account.interface';
import { AccountService } from './../../providers/account.service';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  account = {} as Account;

  constructor(private toastCtrl: ToastController,
              private navCtrl: NavController,
              public accSrv: AccountService
            ) {
    this.accSrv.setEmail(this.account.email);
    this.accSrv.setPassword(this.account.password);
  }

  doLogin() {
    // For some reason accSrv is not seeing the account info
    let result = this.accSrv.login(); // *** result is also unidentified
  }
}

account.service.ts

import { Account } from './../models/account.interface';
import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';

@Injectable()
export class AccountService {

  account = {} as Account;

  constructor(private afAuth: AngularFireAuth) {
  }

 login() {
    console.log(this.account.email); // *** returns unidentified
    return this.account.email;
    // do login here with email and password
  }

  setID(val) {
    this.account.uid = val;
  }

  setEmail(val) {
    this.account.email = val;
  }
setPassword(val) {
    this.account.password = val;
  }

  setLoginfo(val) {
    this.account.logInfo = val;
  }
  
  getID() {
    return this.account.uid;
  }
  
  getEmail() {
    return this.account.email;
  }
    
  getPassword() {
    return this.account.password;
  }

  getLoginfo() {
    return this.account.logInfo;
  }

}
2

This is why async/await is usually bad style. If you use typed Observables, you’ll see what the problem is. You’re assigning to resultingMessage before login returns.

3

Thanks Aaron. Sorry I understand the try catch issue so I have updated it to use an Observable instead. But the problem stands as the provider returns undefined in the console. So it does not have the values of email and password to pass for login. Hope this helps.

36
Screen Shot 2017-11-30 at 16.13.36.png524×728 81.5 KB

4

mayby try

this.account.email.toString()

5

Hi Ben thanks I tried but to no avail. This was all working inside the home page, but it makes more sense to implement it in a service provider and manipulate any account data in its provider. I just can’t seem to initiate it in a page. this.account.email is already hooked to a form input and works in the page but inaccessible in the provider although it is injected into that page as well as defined in the app module level.

6

your service doesn’t seem to have a method for

this.accSrv.setPassword(this.account.password);
7

Sorry my bad, they’re all there but I only extracted the top part of the page. To simplify the matter, I’m failing to instantiate an instance of the provider with the data supplied from the form in the page. I.e. the provider can not access the data in the page or the page cannot pass the data to the provider.
The provider does not have enough information to start its instance it requires input from the form.

8

ok, I know this seem redudant, because the provider should be returning a promise, but I wrap all mine with

getRemoteDataParams(params) {

    return new Promise(resolve => {

   
    resovle=data;

 });

}

then on the calling side i can then add the

.then
9

It is indeed super duper redundant.

CemCelik55 is also using the async/await syntax rather than observables/promises.

10

I don’t trust, the supposed returned promise, this always works.

and he said he changed it to promise but hasn’t posted new code

11

Hi there thanks to both. To further simplify matters I have taken out login attempt completely as it is irrelevant. Updated the code above as well to the full code.
Problem stands the this.account.email is undefined and returns unidentified back to the page also.

30
Screen Shot 2017-11-30 at 18.25.30.png520×578 65 KB

12

is email in your model correctly?

13

Yes thank you Ben. As I mentioned it has been and still working fine if I send it to the console from the page there is no problem. The form is hooked to the model and the hooks work fine. Just that the provider can’t see the same model Account although it is imported in both the Page and the provider.