ionic 3 firebaseデータベースからデータフェッチを表示できません

Question

私は社会的管理ウェブサイトにイオンと角をつけてログイン/プロファイルモジュールを作成する初心者です。プロファイルページにログインしたユーザーデータを表示したいと思います。私はfirebaseデータベースから取得されたデータを表示するためにngModelを使用しました。代わりに、私はコンソールwindow.Andで自分のデータを取得することができます表示されていませんまた、私はプロファイルのデータを編集したい。私は編集ボタンをクリックするだけで、それは読み込みのままです。

私の質問は、データベースによって取得されたプロファイルページにそのデータを表示する方法ですか？データを表示する方法を教えていただけますか？あなたはそのためにグローバル変数を宣言する必要があり

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); 
    } 
    } 
} 

Answer 1

。これを見てください。

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 
     }); 
} 

私はそれが働いたら教えてください！