时间戳

首页 > 解决方案 > 如何显示firebase登录的用户数据Ionic-V3

ionic3 - 如何显示firebase登录的用户数据Ionic-V3

问题描述

我想更新登录用户配置文件（姓名，电子邮件）的firebase，所以首先，我必须显示数据，创建小表单，我想在表单中显示数据。

个人资料.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';
import { Observable } from 'rxjs/Observable';

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

      user = { name: null, email: null};

  constructor(public navCtrl: NavController, public navParams: NavParams, public fAuth: AngularFireAuth,) {
    var user1 = this.fAuth.auth.currentUser;

    if (user1 != null) {
      user1.providerData.forEach(function (profile) {
        console.log("Sign-in provider: " + profile.providerId);
        console.log("  Provider-specific UID: " + profile.uid);
        console.log("  Name: " + profile.displayName);
        console.log("  Email: " + profile.email);
        console.log("  Photo URL: " + profile.photoURL);

        alert('name:->' +profile.displayName)
        this.user.name = this.profile.displayName;
        this.user.emailid = this.profile.email;
      });
    }
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ProfilePage');
  }

}

profile.html

<ion-header>
  <ion-navbar>
    <ion-title>profile</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
    <form (ngSubmit)="UpdateProfile()" ng-controller="AppCtrl">
        <ion-item>
            <ion-label>Name</ion-label>
            <ion-input type="text" [(ngModel)]="user.name" name="name"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label>Email</ion-label>
            <ion-input type="text" [(ngModel)]="user.emailid" name="name"></ion-input>
        </ion-item>
        <button ion-button type="submit" block>Add</button>
    </form>
</ion-content>

console.log 视图

在此处输入图像描述

警报名称

在此处输入图像描述

如您所见，我也可以在警报和控制台日志中获取名称，但是当我尝试这样显示错误时。

this.user.name = this.profile.displayName;
this.user.emailid = this.profile.email;

这里错误：

core.js:1449 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'user' of undefined
TypeError: Cannot read property 'user' of undefined
    at profile.ts:27
    at Array.forEach (<anonymous>)
    at new ProfilePage (profile.ts:19)
    at createClass (core.js:12485)
    at createDirectiveInstance (core.js:12326)
    at createViewNodes (core.js:13784)
    at createRootView (core.js:13673)
    at callWithDebugContext (core.js:15098)
    at Object.debugCreateRootView [as createRootView] (core.js:14381)
    at ComponentFactory_.create (core.js:11278)
    at profile.ts:27
    at Array.forEach (<anonymous>)
    at new ProfilePage (profile.ts:19)
    at createClass (core.js:12485)
    at createDirectiveInstance (core.js:12326)
    at createViewNodes (core.js:13784)
    at createRootView (core.js:13673)
    at callWithDebugContext (core.js:15098)
    at Object.debugCreateRootView [as createRootView] (core.js:14381)
    at ComponentFactory_.create (core.js:11278)
    at c (polyfills.js:3)
    at Object.reject (polyfills.js:3)
    at OverlayPortal.NavControllerBase._fireError (nav-controller-base.js:223)
    at OverlayPortal.NavControllerBase._failed (nav-controller-base.js:216)
    at nav-controller-base.js:263
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (core.js:4760)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at polyfills.js:3

标签： ionic3

解决方案

您需要为用户创建一个类模型（您可以在 ProfilePage 类中创建或在单个类中创建）

export interface user{
email:string;
name:string;
}

然后像这样插入 ProfilePage 类从用户类创建对象

useradd:user={
email:'',
name:'',
}

在 html 页面中更改此代码

 <ion-item>
        <ion-label>Name</ion-label>
        <ion-input type="text" [(ngModel)]=" useradd.name" name="name"></ion-input>
    </ion-item>
    <ion-item>
        <ion-label>Email</ion-label>
        <ion-input type="text" [(ngModel)]=" useradd.email" name="name"></ion-input>
    </ion-item>

希望对你有帮助

推荐阅读