AngularFireDatabase не получает данные

Question

Когда я использую метод afDB.list ('/ path'), я получаю следующее: console.log (this.items);

и у меня есть этот пример в качестве базы данных Firebase: файл списков

Удивительно, но редактирование данных работает отлично (например, remove (), push (), ... и т. Д.), Но я не могу найти его; однако я могу получить к нему доступ. Я думал, что это может быть проблема с правилами, но мои правила в порядке: Правила Firebase

это часть кода, с которой у меня возникают проблемы:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';
import { FirebaseProvider } from '../../providers/firebase/firebase';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
import * as firebase from 'firebase/app';

//import { ListingDetailsPage } from '../listing-details/listing-details';



@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  items: Observable<any[]>;

  constructor(
    public navCtrl: NavController,
    public afAuth: AngularFireAuth,
    public firebaseProvider: FirebaseProvider,
    public afDB: AngularFireDatabase
    ) {
    this.items = afDB.list('/listings',  ref => ref.orderByChild('age').equalTo('large')).valueChanges();
  }

 login(){
     this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider()).then(res => console.log(res));
 }

 logout() {
    this.afAuth.auth.signOut();
 }

 list(){
    console.log(this.items);
 }

}

Я также пытался использовать AngularFireList вместо Observable, но это не меняет проблему. Я также использовал afDB.object () вместо afDB.list (), у меня все та же проблема. Запрос также не является проблемой, так как я пытался использовать простой .list () /. Object () и снова ту же проблему. Кроме того, я создал базу данных, используя тот же код (.set ()), и не смог ее получить.

Соответствующие спецификации:

"angularfire2": "^5.0.0-rc.11",
"firebase": "^5.2.0",
"promise-polyfill": "^8.0.0",
"ionic-angular": "3.9.2",
"@angular/compiler-cli": "5.2.11",
"@angular/core": "5.2.11",

ОС: Windows10 протестированные платформы: браузер Google Chrome / браузер Firefox / эмулятор Android SDK

Answer 1

есть также «управляемый шаблоном» способ получения данных.

Шаблон:

    // example 1
    <ul>
      <li *ngFor="let dino of dinosaurs$ | async">
        <p>{{vdino.name }}</p>
      </li>
    </ul>

    // example 2
    <ul>
      <li *ngFor="let dino of dinosaursArray">
        <p>{{vdino.name }}</p>
      </li>
    </ul>

Контроллер:

constructor(private afDb: AngularFireDatabase) {
  const itemsRef: AngularFireList<any> = afDb.list('dinosaurs');

  // example 1
  this.dinosaurs$ = itemsRef.valueChanges();

  // example 2
  this.dinosaurs$.subscribe(array => this.dinosaursArray = array);
}

Здесь стэкблиц с двумя примерами (кредиты @markgoho): https://stackblitz.com/edit/angular-trrnhg

Депозиты немного устарели, но все равно должны работать для вас.

Кроме того, @JeremyW ответ должен работать, вы можете быть более точным в отношении ошибки?

РЕДАКТИРОВАТЬ: "ошибка: Ошибка типа: объект (...) не является функцией"

Если вы столкнулись с этой ошибкой, вероятно, это проблема совместимости с rxjs 5, вы можете попробовать с rxjs 6.

проверьте это сообщение: Angular2 при прослушивании изменений узла выдает ошибку

Answer 2

В Angularfire2 есть проблема совместимости с rxjs. Таким образом, пока Angularfire2 не обеспечит поддержку rxjs6, вы можете устранить эту ошибку, установив пакет rxjs-compat с помощью команды ниже.

npm install rxjs@6 rxjs-compat@6 --save

Более подробную информацию вы можете найти в руководстве по миграции rxjs. https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md

Answer 3

Вы определили свою переменную items как наблюдаемую (, и это правильно ), но если вы хотите поиграть с данными, возвращенными из этой наблюдаемой, вам необходимо подписаться на эту наблюдаемую.

constructor(
    public navCtrl: NavController,
    public afAuth: AngularFireAuth,
    public firebaseProvider: FirebaseProvider,
    public afDB: AngularFireDatabase
) {
    this.items = afDB.list('/listings',  ref => ref.orderByChild('age').equalTo('large')).valueChanges();
    this.items.subscribe( valueOfItems => {
        console.log(valueOfItems);
    })
}