Ionic 3将数据插入Firebase RTDB

时间:2018-12-07 17:40:54

标签: arrays firebase firebase-realtime-database ionic3

这是我的adduser.ts,我可以插入'email'而不填写adduser.html(使用ngModel)吗?我得到了具有以下代码的电子邮件的价值:this.emailNow = fire.auth.currentUser.email;

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { User } from '../../model/user/user.model';
import { UserListService } from '../../services/user-list.service';
import * as firebase from 'firebase';
import { AngularFireAuth } from '@angular/fire/auth';

/**
 * Generated class for the AdduserPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

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



  user : User = {
      name: '',
      email: '',
      address:'',
      telp: '',
  };


  constructor(public navCtrl: NavController, private userListService: UserListService, public navParams: NavParams,
  private fire: AngularFireAuth, public db: AngularFireDatabase) {
    this.emailNow = fire.auth.currentUser.email;
  }

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


    addUser(user : User) {
      this.userListService.addUser(user);
      then(ref => {
      this.navCtrl.push('LoginPage');
      })
    }
}

这是我的adduser.html

<ion-header>

  <ion-navbar>
    <ion-title>Lengkapi Profil</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding>

  <ion-item>
    <ion-label color="primary" stacked>Nama</ion-label>
    <ion-input [(ngModel)]="user.name"></ion-input>
  </ion-item>


  <ion-item>
    <ion-label color="primary" stacked>Alamat</ion-label>
    <ion-input [(ngModel)]="user.address"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label color="primary" stacked>No Telp</ion-label>
    <ion-input type="tel" [(ngModel)]="user.telp"></ion-input>
  </ion-item>

  <button ion-button (click)="addUser(user)">Lanjutkan</button>
</ion-content>

这是user-list.service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { User } from '../model/user/user.model';

@Injectable()
export class UserListService {

    private userListRef = this.db.list<User>('user-list');

    constructor(private db: AngularFireDatabase) { }

    getUserList() {
        return this.userListRef;
    }

    addUser(user: User) {
        return this.userListRef.push(user);
    }
}

对不起,我的英语不好。

1 个答案:

答案 0 :(得分:0)

您已经在this.emailNow = fire.auth.currentUser.email;

处检索了电子邮件

然后在html中执行以下操作:

<ion-item>
<ion-label color="primary" stacked>Email</ion-label>
<ion-input type="email" readonly="true" [(ngModel)]="emailNow"></ion-input>
</ion-item>