@ angular / fire База данных в реальном времени: как получить ключ и значение под ним - PullRequest
Новая
       45

@ angular / fire База данных в реальном времени: как получить ключ и значение под ним

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

Фон

Я использую ionic 4 с "@ angular / fire": "^ 5.0.2"

Проблема

Я хочу перечислить все значенияпод профилем узла вот моя структура firebase: Brian Firebase

Я хочу получить ключ, местоположение, ownerName и restoName.Я буду использовать ключ позже, чтобы открыть другой узел.А для приведенного ниже кода я хочу отобразить местоположение, ownerName и 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();
      }
    });
  }
}

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

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

Ответы [ 2 ]

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

Решено!

Мне нужно обновить мои rxjs и rxjs-compat до версии 6.3.3. 

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

В коде нет изменений.То же самое с моим вопросом выше.

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

Вы можете получить доступ к свойству профиля напрямую из объекта 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>
...