@ angular / fire База данных в реальном времени + Ionic Как распечатать список console.log наблюдаемый - PullRequest
Новая
       38

@ angular / fire База данных в реальном времени + Ionic Как распечатать список console.log наблюдаемый

0 голосов
/ 14 октября 2018

Фон

Я использую 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. Я хочу получить значения из Firebase node

Это мой 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);, но консоль возвращает меня console.log

Любая помощь будет принята.

Ответы [ 2 ]

0 голосов
/ 14 октября 2018

Вы можете использовать оператор «tap» для console.log () в rxjs. 

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))
    )
0 голосов
/ 14 октября 2018

snapshotchanges () вернет 

Observable<AngularFireAction<DataSnapshot>[]>

для коллекций.Чтобы подписаться и показать содержимое внутри, вы можете: 

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