ionic 3 App unable to display data fetch from firebase database

Question

I am novice in ionic and angular and creating login/profile module in my society management website.I wanted to display logged in user data on profile page.I have fetch the data and I have used ngModel to display the data which is retrieved from firebase database.But it is not displaying, instead, I can get my data in console window.And also i wanted to edit the profile data.So input field will become editable after i have click on edit button,before it will remain read only.

My Question is about how to display that data on profile page which is retrieved by the database? can anybody tell me how to display the data?

Profile.html

 <form [formGroup]="authForm" (ngSubmit)="onSubmit(authForm.value)">
    <ion-item [ngClass]="{'error-border':!authForm.controls.username.valid && authForm.controls.username.touched}">
        <ion-label floating>Username</ion-label>
        <ion-input formControlName="username" type="text" [(ngModel)]="username"></ion-input>
    </ion-item>
    <ion-item *ngIf="authForm.controls.username.hasError('required') && authForm.controls.username.touched">
        <p>Sorry, field username is required!</p>
    </ion-item>
    <ion-item [ngClass]="{'error-border':!authForm.controls.flatno.valid && authForm.controls.flatno.touched}">
        <ion-label floating>Flat No</ion-label>
        <ion-input formControlName="flatno" type="text" [(ngModel)]="flatno"></ion-input>
    </ion-item>
    <ion-item *ngIf="authForm.controls.flatno.hasError('required') && authForm.controls.flatno.touched">
        <p>Sorry, field is required!</p>
    </ion-item>

    <ion-item [ngClass]="{'error-border':!authForm.controls.email.valid && authForm.controls.email.touched}">
        <ion-label floating>Email</ion-label>
        <ion-input formControlName="email" type="text" [(ngModel)]="email"></ion-input>
    </ion-item>
    <ion-item [ngClass]="{'error-border':!authForm.controls.password.valid && authForm.controls.password.touched}">
        <ion-label floating>Password</ion-label>
        <ion-input formControlName="password" type="password" [(ngModel)]="password"></ion-input>
    </ion-item>
    <ion-item [ngClass]="{'error-border':!authForm.controls.family.valid && authForm.controls.family.touched}">
        <ion-label floating>Total Family Member</ion-label>
        <ion-input formControlName="family" type="text" [(ngModel)]="family"></ion-input>
    </ion-item>
    <ion-item [ngClass]="{'error-border':!authForm.controls.vehicles.valid && authForm.controls.vehicles.touched}">
        <ion-label floating>Total Vehicles</ion-label>
        <ion-input formControlName="vehicles" type="text" [(ngModel)]="vehicles"></ion-input>
    </ion-item>
    <button ion-button full color="button"  style="margin-top: 20px;" type="submit">Save</button>
</form>

profile.ts

  ref.on('value', this.gotData,this.errData);
  gotData(data){
   console.log('data');

   var users = data.val();
   var keys = Object.keys(users);

  for(i=0; i < keys.length;i++){

     var k = keys[i];
     var sessionUser =sessionStorage.getItem("Sessioneml");

    if(users[k].email == sessionUser){
        console.log('true');
        var email = users[k].email;
        var Id = users[k].ID;
        var username = users[k].username;
        var flatno = users[k].flatno;
        var family = users[k].familyMember;
        var vehicles= users[k].parking_slot;

        console.log('user data ='+Id, username,flatno,family,vehicles);
    }
  }
}

DwlRathod DwlRathod · Accepted Answer · 2017-12-07T11:46:15

You need to declare global variable for that. Please have a look at this.

    export class YOUR_PAGE_NAME{

      email: string = "";
      Id: string = "";
      username: string = "";
      flatno: string = "";
      family: string = "";
      vehicles: string = "";

    //Your constructor and other code

        let self = this;
        ref.on('value', function (data) {
        console.log('data');

        var users = data.val();
        var keys = Object.keys(users);

         for (i = 0; i < keys.length; i++) {
           var k = keys[i];
           var sessionUser = sessionStorage.getItem("Sessioneml");
           if (users[k].email == sessionUser) {
            console.log('true');
            self.email = users[k].email;
            self.Id = users[k].ID;
            self.username = users[k].username;
            self.flatno = users[k].flatno;
            self.family = users[k].familyMember;
            self.vehicles = users[k].parking_slot;
           }
         }
        }, function (error) {
              //Error code goes here
        });
}

Please let me know if it worked!

ionic 3 App unable to display data fetch from firebase database

1 Answers