所以我对离子相对较新,我试图将用户添加到实时firebase数据库。用户需要提供更多详细信息,而不仅仅是电子邮件和密码(例如他们的名字,姓氏,地址,电话号码等),因为我稍后需要详细信息。
我正在关注一个教程,我相信由于教程略显陈旧,我无法通过此错误使函数正常工作:
错误:未捕获(在承诺中):错误:Reference.child失败:第一个参数是无效路径=" profile / $ {auth.uid}"。路径必须是非空字符串,并且不能包含"。","#"," $"," [& #34;,或"]" 错误:Reference.child失败:第一个参数是无效路径=" profile / $ {auth.uid}"。路径必须是非空字符串,并且不能包含"。","#"," $"," [& #34;,或"]"
我不完全确定我做错了什么,所以任何帮助都会受到赞赏。 我的代码在
之下Profile.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {AngularFireAuth} from 'angularfire2/auth';
import { Profile } from '../../model/profile';
import{AngularFireDatabase} from 'angularfire2/database';
import { TabsPage } from '../tabs/tabs';
/**
* Generated class for the ProfilePage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-profile',
templateUrl: 'profile.html',
})
export class ProfilePage {
profile = {} as Profile
constructor(private afAuth:AngularFireAuth, private afDatabase: AngularFireDatabase, public navCtrl: NavController, public navParams: NavParams) {
}
createProfile() {
this.afAuth.authState.take(1).subscribe(auth => {
this.afDatabase.object('profile/${auth.uid}').set(this.profile)
.then(() => this.navCtrl.setRoot(TabsPage));
})
}
ionViewDidLoad() {
console.log('ionViewDidLoad ProfilePage');
}
}
Profile.html
<ion-header>
<ion-navbar>
<ion-title>Profile</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-item>
<ion-label floating>Username</ion-label>
<ion-input [(ngModel)]="profile.username" name="username"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Username</ion-label>
<ion-input [(ngModel)]="profile.firstname" name="firstname"></ion-input>
</ion-item>
<div>
<button ion-button (click)= "createProfile()" full color='dark'> Create</button>
</div>
</ion-content>
App.component.ts
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { FormsModule } from '@angular/forms';
import{FIREBASE_CONFIG} from './app.firebase.config'
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import {LoginPage} from '../pages/login/login';
import {ProfilePage} from '../pages/profile/profile';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { RegisterPage } from '../pages/register/register';
import {AngularFireModule} from 'angularfire2';
import {AngularFireAuthModule} from 'angularfire2/auth';
import {AngularFireDatabase, AngularFireDatabaseModule} from 'angularfire2/database';
@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
LoginPage,
RegisterPage,
ProfilePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
AngularFireModule,
AngularFireModule.initializeApp(firebaseAuth),
AngularFireAuthModule,
AngularFireDatabaseModule,
FormsModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
LoginPage,
RegisterPage,
ProfilePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
答案 0 :(得分:0)
If you pass variable inside the path like this ${uid},
你不能使用撇号('profile / $ {auth.uid}'),所以你需要使用严重重音 (``)< / strong>(profile/${auth.uid}
)。您也可以使用这种方式(“profile /”+ auth.uid)
createProfile() {
this.afAuth.authState.take(1).subscribe(auth => {
this.afDatabase.object(`profile/${auth.uid}`).set(this.profile)
.then(() => this.navCtrl.setRoot(TabsPage));
})
}
也尝试这个,
createProfile() {
this.afAuth.authState.take(1).subscribe(auth => {
this.afDatabase.database.ref('/profile').child(auth.uid)
.set(this.profile).then(() => this.navCtrl.setRoot(TabsPage));
})
}