@angular/fire 实时数据库：如何获取其下的键和值答案

【问题标题】：@angular/fire Real Time Database: How to get key and value under it@angular/fire 实时数据库：如何获取其下的键和值
【发布时间】：2018-10-14 04:40:35
【问题描述】：

背景

我正在使用带有 "@angular/fire": "^5.0.2" 的 ionic 4

问题

我想列出配置文件节点下的所有值，这是我的 firebase 结构：

我想获取密钥、位置、所有者名称和恢复名称。稍后我将使用该密钥打开另一个节点。对于下面的代码，我想显示位置、所有者名称和恢复名称。

我的代码

在 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();
      }
    });
  }
}

在 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>

此代码结果为Object(...) is not a function。

任何帮助将不胜感激。谢谢

【问题讨论】：

标签： angular firebase ionic-framework angularfire5

【解决方案1】：

您可以直接从data 对象访问配置文件属性。

<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>

【讨论】：

感谢您的回复。我仍然收到Runtime Error: Object(...) is not a function
请问哪行代码抛出了这个错误？
我想它来自 home.html。因为当我注释掉<ion-list>时，没有错误。
如果你点击错误，它会告诉你错误的确切位置。
AngularFire2 5.0.0-rc.8 或更高版本不再支持 rxjs 5，升级到 6 并包含 rxjs-compat npm i rxjs@^6.0 rxjs-compat

【解决方案2】：

解决了！

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

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

代码没有变化。我上面的问题还是一样。

【讨论】：