ionic 3 App 无法显示从 firebase 数据库中获取的数据

Question

我是 ionic 和 Angular 方面的新手，并在我的社会管理网站中创建登录/个人资料模块。我想在个人资料页面上显示登录的用户数据。我已经获取数据并使用 ngModel 来显示数据从firebase数据库中检索。但它没有显示，相反，我可以在控制台窗口中获取我的数据。而且我想编辑配置文件数据。所以在我点击编辑按钮后输入字段将变为可编辑，然后它会保留只读。

我的问题是关于如何在数据库检索的个人资料页面上显示该数据？谁能告诉我如何显示数据？

个人资料.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
        });
}

如果成功请告诉我！