@angular/fire实时数据库：如何获取其下的键和值 出身背景

我正在使用带有“@angular/fire”的离子4“^5.0.2”

问题 我想列出profile节点下的所有值，以下是我的firebase结构：

我想要钥匙、位置、所有者姓名和restoName。稍后我将使用该键打开另一个节点。对于下面的代码，我想显示位置、所有者名称和restoName

我的代码 在home.ts中

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';

import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
import { UserProfile } from './../../models/user-profile';
import { RestoProfile } from './../../models/resto-profile';


@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  restoProfileData: AngularFireList<RestoProfile[]>;
  restoProfileRef: AngularFireList<RestoProfile[]>;

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

  ionViewDidLoad() {
    this.afAuth.authState.subscribe(data => {
      if(data && data.email && data.uid){
        this.toast.create({
          message: `Welcome to brianApp-customer, ${data.email}`,
          duration: 3000
        }).present();

        this.restoProfileRef = this.afDatabase.list<RestoProfile>(`profile/`);
        this.restoProfileData = this.restoProfileRef.snapshotChanges();

      }
      else {
        this.toast.create({
          message: `Could not find authentication details`,
          duration: 3000
        }).present();
      }
    });
  }
}

从'@angular/core'导入{Component}；
从“ionic angular”导入{IonicPage，NavController，NavParams，ToastController}；
从'@angular/fire/auth'导入{AngularFireAuth}；
从'@angular/fire/database'导入{AngularFireDatabase，AngularFireList}；
从“/../../models/user profile”导入{UserProfile}；
从“/../../models/resto profile”导入{RestoProfile}；
@IonicPage（）
@组成部分({
选择器：“主页”，
templateUrl:'home.html'
})
导出类主页{
restoProfileData：角度火工品；
restoProfileRef：角度火工列表；
构造函数（专用afAuth:AngularFireAuth，专用afDatabase:AngularFireDatabase，
私人吐司：吐司控制器，
公共navCtrl:NavController，公共navParams:navParams）{
}
ionViewDidLoad（）{
this.afAuth.authState.subscribe（数据=>{
if（data&&data.email&&data.uid）{
这是toast.create({
消息：`欢迎来到brianApp客户，${data.email}`，
持续时间：3000
}).present（）；
this.restoProfileRef=this.afDatabase.list（`profile/`）；
this.restoProfileData=this.restoProfileRef.snapshotChanges（）；
}
否则{
这是toast.create({
消息：`找不到身份验证详细信息'，
持续时间：3000
}).present（）；
}
});
}
}

在home.html中

<ion-list>
  <ion-item *ngFor="let data of restoProfileData | async">
    <h2>Key: {{ data.payload.key }}</h2>
    <h2>Location: {{data.payload.val().location}}</h2>
    <h2>ownerName: {{data.payload.val().ownerName}}</h2>
    <h2>restoName: {{data.payload.val().restoName}}</h2>
  </ion-item>
</ion-list>

密钥：{{data.payload.Key}
位置：{{data.payload.val（）.Location}
所有者名称：{{data.payload.val（）.ownerName}
restoName:{{data.payload.val（）.restoName}

此代码导致

对象（…）不是函数

任何帮助都将不胜感激。谢谢
您可以直接从
数据
对象访问配置文件属性

<ion-list>
  <ion-item *ngFor="let data of restoProfileData | async">
    <h2>Key: {{ data.key }}</h2>
    <h2>Location: {{data.location}}</h2>
    <h2>ownerName: {{data.ownerName}}</h2>
    <h2>restoName: {{data.restoName}}</h2>
  </ion-item>
</ion-list>


键：{{data.Key}
位置：{{data.Location}
所有者名称：{{data.ownerName}
restoName:{{data.restoName}
解决了它

我需要将我的rxjs和rxjs compat更新到版本6.3.3

npm install rxjs@6.3.3 rxjs-compat@6.3.3 --save

代码没有变化。我上面的问题还是一样。
谢谢你的回答。我仍然得到
运行时错误：对象（…）不是函数
你能告诉我哪行代码抛出了这个错误吗？我想它来自home.html。因为当我注释掉
时，没有错误。如果单击错误，它将告诉您错误的确切位置。AngularFire2 5.0.0-rc.8或更高版本不再支持rxjs 5，请升级到6，并包括rxjs compat npm I rxjs@^6.0 rxjs compat