显示从 AngularFireDatabase 列表返回的值？答案

【问题标题】：Displaying values returned from AngularFireDatabase list?显示从 AngularFireDatabase 列表返回的值？
【发布时间】：2018-05-21 20:55:33
【问题描述】：

我正在尝试在 Ionic 3 应用中从 Firebase 数据库中查询一些数据。我正在尝试遵循this tutorial 中的语法，但我一直遇到错误：

ERROR TypeError: queryFn is not a function

这是我正在使用的代码：

this.games = this.afDatabase.list('/games/', {
    query: {
        orderByChild: user.uid
    }
});

还有我的进口：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireFunctions } from 'angularfire2/functions'
import { AuthProvider } from '../../providers/auth/auth';
import { AngularFireDatabase } from 'angularfire2/database';
import { Facebook } from '@ionic-native/facebook';

什么可能导致该错误？

编辑

看起来我试图遵循的那个教程已经过时了。我（有点）让它与这段代码一起工作。

this.afDatabase.list<Game>('/games/', ref => ref.orderByChild(user.uid)).valueChanges().subscribe(data => console.log(data));

但它会导致另一个错误：

Uncaught TypeError: Object(...) is not a function

如何在模板中显示返回的 observable？我尝试像上面那样订阅，我也尝试直接在模板中这样做：

this.games = this.afDatabase.list<Game>('/games/', ref => ref.orderByChild(user.uid)).valueChanges();

然后在模板中：

*ngFor="let game of games | async"

这会导致错误：

Uncaught TypeError: Object(...) is not a function

【问题讨论】：

this.games 是可观察的吗？游戏：Observable; ?
是的。 console.log(this.games) 结果为Observable {_isScalar: false, source: Observable, operator: MapOperator}

标签： javascript firebase firebase-realtime-database angularfire2

【解决方案1】：

this.games 是可观察的吗？ gameCol: AngularFirestoreCollection;

games: Observable<Games[]>;
gameArray: Games[];

  getAllGames() {
        this.gameCol= this.db.collection('games');
        return this.gameCol.valueChanges();
    }
this.games.getAllGames();

    this.games.subscribe(game => {
      this.gameArray = game;
    });

在 HTML 中

<select class="form-control">
    <option [value]="0">Select</option>
    <option *ngFor="let game of games">
    {{game.something}}
   </option>
</select>

【讨论】：

我的代码与你的一致。仍然得到同样的错误：Uncaught TypeError: Object(...) is not a function
另外，如果在 HTML 中使用 *ngFor 中的“游戏”，那么 gameArray 的意义何在？我也尝试使用 *ngFor='let game of gameArray'。同样的错误。

【解决方案2】：

我归因于一个单独问题的另一个问题的解决方案解决了这个问题。

需要将 rxjs 从版本 5 更新到版本 6。

AngularFire httpsCallable Object(...) is not a function

【讨论】：