Angular @角度/火力实时数据库+；如何打印console.log可观察列表 背景

我使用的是离子4，“@angular/fire”：“^5.0.2”，“rxjs”：“^6.3.3”，“rxjs compat”：“^6.3.3”

问题: 如何打印console.log可从Firebase观察到的列表？包括键和值。我期待一个JSON格式的数组

我能够读取数据库，但在console.log中看不到它。实际上，我想将从Firebase list observable中检索到的值用于另一个功能，但是因为我无法在console.log中看到这些值，所以我不知道它的行为

代码 这是我想要从中获取值的Firebase节点

这是我的家。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';

import { OrderMenuPage } from '../order-menu/order-menu';


@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}；
从“../order menu/order menu”导入{OrderMenuPage}；
@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（）；
}
});
}

这是我的主页.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  Choose a restaurant?
<ion-list>
  <ion-item *ngFor="let data of restoProfileData | async" (click)="selectResto(data)">
    <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>
</ion-content>

离子空白
选择餐厅？
密钥：{{data.payload.Key}
位置：{{data.payload.val（）.Location}
所有者名称：{{data.payload.val（）.ownerName}
restoName:{{data.payload.val（）.restoName}

我尝试了

console.log（this.restoProfileData）；

但是控制台返回了我

任何帮助都将不胜感激。

快照更改（）将返回

Observable<AngularFireAction<DataSnapshot>[]>

snapshotchanges（）将返回

Observable<AngularFireAction<DataSnapshot>[]>

---

您可以在rxjs中对console.log（）使用“tap”操作符

或

---

您可以在rxjs中对console.log（）使用“tap”操作符

或

---

---

谢谢你的回复。这行代码放在哪里？我把它放在这里：

this.restoProfileData=this.restoProfileRef.snapshotChanges（）.map（actions=>actions.map（a=>（{key:a.key，…a.payload.val（））

但它抛出一个错误：

this.restoProfileRef.snapshotChanges（…）.map不是一个函数

你需要使用pipe（）嗨@SureshKumarAriya你能给出一个更详细的例子吗，如何使用pipe（）@Joe Wu。在你最近的编辑之后，我得到了以下信息：

这个.restoProfileRef.snapshotChanges（…）。map不是一个函数

你可以使用pipe（）尝试Suresh的方法函数。我猜map没有正确导入到您的组件中。感谢您的回复。这行代码放在哪里？我把它放在这里：

this.restoProfileData=this.restoProfileRef.snapshotChanges（）.map（actions=>actions.map（a=>（{key:a.key，…a.payload.val（）））

但是它抛出了一个错误：

this.restoProfileRef.snapshotChanges（…）.map不是一个函数

你需要使用pipe（）Hi@SureshKumarAriya能否请你给出一个更详细的例子，如何使用pipe（）@Joe Wu。根据你最近的编辑，我得到了这个：

this.restoProfileRef.snapshotChanges（…）.map不是一个函数

您可以使用pipe（）函数尝试Suresh的方法。我想map在您的组件中没有正确导入。第一个选项。您需要

导入{tap}从'rxjs/operators'；

。但是，我仍然在console.log中获得一个抽象元数据值。我只希望记录在firebase中看到的值。请尝试选项2，并让我知道第二个选项，您需要在代码末尾添加

）；

。但这次我遇到另一个错误：

未定义运行时错误映射

是否导入了map操作符添加了“）”。请立即尝试抱歉。现在我从“rxjs/operators”添加了

import{map}；

但是现在浏览器和控制台没有显示任何内容……第一个选项。您需要

import{tap}从'rxjs/operators'；

。但是，我仍然在console.log中获得一个抽象元数据值。我只希望记录在firebase中看到的值。请尝试选项2，并让我知道第二个选项，您需要在代码末尾添加

）；

。但这次我遇到另一个错误：

未定义运行时错误映射

是否导入了map操作符添加了“）”。请立即尝试抱歉。现在我添加了从“rxjs/operators”导入{map}；但是现在浏览器和控制台没有显示任何内容。。。。

this.restoProfileData = this.restoProfileRef.snapshotChanges().pipe(
   tap((data)=> console.log(data))
);

this.restoProfileData = this.restoProfileRef
    .snapshotChanges()
    .pipe(
      map(changes => ({
      changes.map(change => ({key: change.payload.key, ...change.payload.val()}));
      })),
      tap((data)=> console.log(data))
    )