Получить информацию о пользователе из Firebase и отобразить в приложении

63
8

У меня есть страница профиля, где я пытаюсь создать функцию retrieveUserData, которая будет извлекать значения из firebase и назначать их переменным, которые я могу использовать для отображения в html файле.

import { Component, OnInit, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { HomePage from '../../../pages/home/home';
import { AngularFireDatabase } from 'angularfire2/database';
import { Profile } from '../../../models/profile';
import { AngularFireAuth } from 'angularfire2/auth';

@Component({
selector: 'page-profile',
templateUrl: 'profile.html',
})
export class ProfilePage implements OnInit {

name: string = "";
hometown: string = "";

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

}

ngOnInit(){

}

onGoToHome(){
this.navCtrl.push(HomePage)
}

retrieveUserData(){
var userId = this.afAuth.app.auth().currentUser.uid;

}

}

Я пытаюсь извлечь определенную информацию из базы данных firebase, чтобы присвоить значения имени и родному городу, а затем использовать их в html файле. Я попытался использовать следующие примеры из этого документа, но синтаксис для меня не работает. Ни один из синтаксисов не распознается. Я знаю, что это супер тривиально. Может ли кто-нибудь помочь мне с четким примером надлежащего способа захвата этих данных и использования. Таблица в firebase называется "профиль".

спросил(а) 2021-01-25T20:38:32+03:00 4 месяца, 3 недели назад
1
Решение
63

Я думаю, что проблема связана с тем, что вы ссылаетесь на документы Firebase - когда вы используете пакет Angularfire2... Ознакомьтесь с документацией Angularfire2.

В то же время я приведу пример из одного из моих проектов, где я запрашиваю базу данных в реальном времени через Angularfire2, чтобы помочь вам:

  this.afDatabase.database.ref('profile/${userId }').once('value').then( userDetailsAsObject => {

let userDetails = userDetailsAsObject.val() ? userDetailsAsObject.val() : {};
console.log(userDetails);

}).catch( err => {
console.log('Error pulling /profile table inside functionName() inside componentName.component.ts');
console.log(err);
});

EDIT за дополнительный вопрос в комментариях: Предполагая, что у вас есть такая структура базы данных...

profile
|
|--12bd02nasBD0Bd93nbD (userID)
|
|--name:"John Smith"
|
|--hometown:"Paris, France"

Затем запрос базы данных вернет узел 12bd02nasBD0Bd93nbD как один большой объект... так что вы получите доступ к свойствам этого объекта так же, как и любой другой объект JavaScript (то есть обозначение точки или обозначение скобки)

this.name = userDetails['name'];
this.hometown = userDetails['hometown'];

Затем просто укажите name и переменные hometown в своем HTML.

ответил(а) 2021-01-25T20:38:32+03:00 4 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема