Как отобразить Firebase вошедших в данные пользователя Ionic-V3 - PullRequest
0 голосов
/ 03 декабря 2018

Я хочу обновить 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

enter image description here

имя оповещения

enter image description here

Как вы можете видеть, я могу получить имя и в журнале предупреждений, и в консольном журнале, но когда я пытаюсь получить подобное сообщение об ошибке.

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

1 Ответ

0 голосов
/ 10 декабря 2018

вам нужно создать модель класса для пользователя (вы можете создать ее внутри класса 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>

Я надеюсь, что это поможет вам

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...