Ionic 3 - Angular 5 和 Firebase - 存储数据问题

Question

我正在尝试使用 Firebase 在 Ionic 中制作一个简单的登录应用程序。

我已经安装了所有依赖项，并设置了我的登录和注销功能...但是当我尝试创建 "profile data" 时，firebase 中没有任何反应...这是我的代码：

Profilo.ts

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

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

  profilo = {} as Profilo;

  constructor(private afauth : AngularFireAuth,
    private afDatabase: AngularFireDatabase,
    public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
  }
  getCurrentUser() {
    this.afauth.authState.subscribe(data => {
      console.log('A informacao de data ' + data.uid);
      return data.uid;
    });
  }
  createProfilo() {
      this.afauth.authState.take(1).subscribe(auth => {
      this.afDatabase.object(`profilo/${auth.uid}`).set(this.profilo)
        .then(() => this.navCtrl.setRoot('AccountPage'));
    })

  }

}

Profilo.html

<ion-header>

  <ion-navbar color="primary">
    <ion-title>Profilo</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

  <ion-item>
    <ion-label floating>Username</ion-label>
    <ion-input ([ngModel])="profilo.username"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label floating>Nome</ion-label>
    <ion-input ([ngModel])="profilo.nome"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label floating>Cognome</ion-label>
    <ion-input ([ngModel])="profilo.cognome"></ion-input>
  </ion-item>
  <button ion-button color="primary"  (click)="createProfilo()"> Create Profile</button>

</ion-content>

当我调用函数 "create Profile" 时，它应该将数据写入 Firebase，但什么也没有发生....我做错了什么？

这也是我的package.json

dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "~4.12.0",
    "@ionic-native/splash-screen": "~4.12.0",
    "@ionic-native/status-bar": "~4.12.0",
    "@ionic/storage": "2.2.0",
    "angularfire2": "^5.0.2",
    "firebase": "^5.5.2",
    "ionic-angular": "3.9.2",
    "ionic2-super-tabs": "^4.3.1",
    "ionicons": "3.0.0",
    "ngx-pipes": "^2.3.5",
    "promise-polyfill": "^8.1.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },

Answer 1

您对 ngModel 的使用不正确

<ion-input ([ngModel])="profilo.nome"></ion-input>

应该是[()]而不是([])

<ion-input [(ngModel)]="profilo.nome"></ion-input>

在此处查看工作示例：https://stackblitz.com/edit/ionic-angularfire-auth-profile

Ionic 3 - Angular 5 和 Firebase - 存储数据问题

Ionic 3 - Angular 5 and Firebase - Problem in store data

firebase

ionic-framework

firebase-realtime-database

angularfire2

angular