Question

每当我使用afDB.list（'/ path'）方法时，都会得到以下信息： console.log(this.items);

并且我有以下示例作为我的Firebase数据库：listings file

令人惊讶的是，编辑数据工作得很好（例如remove（），push（）等），但是我似乎无法检索它；但是，我可以访问它。我以为这可能是规则问题，但是我的规则很好：firebase Rules

这是我遇到问题的代码部分：

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

您已将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);
    })
}

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

还有一种“模板驱动”的方式来检索数据。

模板：

java

控制器：

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

这里有两个示例的堆栈闪电战（@markgoho提供）： https://stackblitz.com/edit/angular-trrnhg

部门有点过时了，但仍然可以使用。

此外，@ JeremyW答案应该可以，您能否更详细地说明错误？

编辑：“错误：TypeError：对象（...）不是函数”

如果遇到此错误，则可能是rxjs 5的兼容性问题，您可以尝试使用rxjs 6。

检查此帖子： Angular2 fire listen to node changes throws an error

AngularFireDatabase不检索数据

3 个答案: