@angular/fire 实时数据库 + Ionic 如何打印可观察到的 console.log 列表

Question

背景

我正在使用 ionic 4，“@angular/fire”：“^5.0.2”，“rxjs”：“^6.3.3”，“rxjs-compat”：“^6.3.3”。

问题

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

我可以读取数据库，但是在 console.log 中看不到它。我实际上想使用从可观察的 Firebase 列表中检索到的值用于另一个功能，但是因为我看不到 console.log 中的值，所以我不知道它的行为。

代码

这是我想要从中获取值的 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';

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

这是我的home.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>

我尝试了console.log(this.restoProfileData);，但控制台返回了我

任何帮助将不胜感激。

Answer 1

snapshotchanges() 将返回

Observable<AngularFireAction<DataSnapshot>[]>

用于收藏。为了订阅和显示里面的内容，您可以：

 this.restoProfileData = this.restoProfileRef
    .snapshotChanges()
    .map(changes => {
      return changes.map(change => ({key: change.payload.key, ...change.payload.val()}));
    })

Answer 2

您可以在 rxjs 中对 console.log() 使用 'tap' 运算符。

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