Ionic firebase - Пользовательский

Итак, я относительно новичок в ionic и пытаюсь добавить пользователя в базу данных firebase в реальном времени. Пользователь должен иметь больше информации, чем просто адрес электронной почты и пароль (например, его имя, фамилия, адрес, номер телефона и т. д.), Так как подробности мне понадобятся позже.

Я следую руководству и считаю, что из-за того, что оно немного устарело, я не могу заставить функцию работать из-за этой ошибки:

Ошибка: Неперехваченный (в обещании): Ошибка: Ошибка Reference.child: Первый аргумент был недопустимым путем = "profile / $ {auth.uid}". Пути должны быть непустыми строками и не могут содержать ".", "#", "$", "[" Или "]" Ошибка: Ошибка Reference.child: первый аргумент был недопустимым путем = "profile / $ {auth.uid}". Пути должны быть непустыми строками и не могут содержать ".", "#", "$", "[" Или "]"

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

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.info('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 {}
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
0
833
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий
If you pass variable inside the path like this ${uid}, 

вы не можете использовать апостроф ('profile / $ {auth.uid}'), поэтому для этого вам нужно использовать серьезный акцент(``) (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));

  })
}

рад помочь вам. Вы можете отметить ответ как правильный @ s.mahmood

Sarasa Gunawardhana 08.04.2018 18:25

Другие вопросы по теме