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

时间:2017-12-07 10:54:31

标签: angular firebase firebase-realtime-database ionic3

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

我的问题是关于如何在数据库检索的个人资料页面上显示该数据?任何人都可以告诉我如何显示数据吗?

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

1 个答案:

答案 0 :(得分:0)

您需要为此声明全局变量。请看看这个。

    //get date from request
    $date = $request->get('test_date');

    //update date in request
    $request->offsetSet('test_date', DateTime::createFromFormat('m/d/Y', $date)->getTimestamp());

    //validate the updated date field
    $this->validate($request, ['test_date' => 'required|unique:test_db']);

请告诉我它是否有效!