Typescript 从firebase检索用户配置文件数据并显示

Im使用以下代码在firebase中创建用户配置文件：

username: string
msgnumber: number
level: number

constructor(private fire:AngularFireAuth,private db :AngularFireDatabase,public navCtrl: NavController, public navParams: NavParams) {

}

createProfile() {

    this.fire.authState.take(1).subscribe(auth => {

    this.db.object(`profile/${auth.uid}`).set({
        username: this.username,
        msgnumber: 0,
        level: 0
    }).then(() => 
        this.navCtrl.setRoot(TabsPage));
    })
}

它正在工作。现在我正试图获取用户的数据并将其显示在他们的个人资料页面上

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


@Component({
    selector: 'page-profile',
    templateUrl: 'profile.html'
})

export class ProfilePage {
    profileData: FirebaseListObservable<any>

    constructor(private fire:AngularFireAuth,private db :AngularFireDatabase,public navCtrl: NavController) {

        this.fire.authState.subscribe(auth =>{
            this.profileData = this.db.list(`profile/${auth.uid}`);
            console.log(this.profileData);
        });
    }
}

从'@angular/core'导入{Component}；
从'ionic angular'导入{NavController}；
从'angularfire2/auth'导入{AngularFireAuth}；
从“angularfire2/database”导入{AngularFireDatabase，FirebaseListObservable}；
@组成部分({
选择器：“页面配置文件”，
templateUrl:'profile.html'
})
导出类配置文件页面{
profileData:FirebaseListObservable
您的方法正确。要最终检索数据，您需要
订阅
分配给
此的第二个observable。profileData

像这样：

this.fire.authState.subscribe(auth => {
  // subscribe to the observable
  this.db.list(`profile/${auth.uid}`).valueChanges().subscribe(profile => {
    console.log(profile);
  });
});

现在为了避免嵌套，您可以使用rxjs提供的
switchMap
操作符

结果如下所示：

this.profileData$ = this.fire.authState.switchMap(auth => this.db.list(`profile/${auth.uid}`).valueChanges());
this.profileData$.subscribe(profile => console.log(profile))

谢谢你的回答。我试了一下，得到了这个.db.list（…）.subscribe不是函数错误。你知道吗？你使用的是哪个版本的
angularfire2
？最新版本。5我想好了，那么你也需要使用angularfire2的一个操作。我已经更新了答案。谢谢，我刚刚阅读了文档，注意到了差异。你知道如何在html上显示配置文件数据吗？
{{profile.level}:{{profile.username}:{{profile.msgnumber}}
处理类似的事情但不起作用。你能告诉我从哪里学习将用户配置文件提取到angular中吗？有博客、视频或教程吗？