开发者问题收集

为什么 Firebase 实时数据库中的列表不会显示?使用 Ionic 和 AngularFire2

2018-03-11
464

我很困惑,为什么我的列表无法显示。

我正在使用 Firebase 实时数据库,检索和显示具有最简单结构的节点下的数据完全没有问题。例如,从 -|cuisines -|itemId -key:value 检索数据就可以了。

cuisines.ts 中,我可以在构造函数中放入

items: Observable<any[]>;

this.items = database.list('cuisines').valueChanges();

,并且此 HTML

<ion-list>
<ion-item class="text" *ngFor="let item of items | async">
{{item.name}}
</ion-item>
</ion-list>

一切都正常。我的菜系列表显示出来,我很高兴。

但是,如果我尝试使用 *ngFor 显示我尝试从数据库检索的数据,位置为 -|cuisines -$uid -|itemId -key:value ,则不会显示数据。

因此,在 cuisines.ts 中,我有

  items: Observable<any[]>;

constructor(private database: AngularFireDatabase, private auth: AngularFireAuth) {
  this.auth.authState.subscribe(user => {
    if(user) this.userId = user.uid
  });
  this.items = database.list(`cuisines/${this.userId}`).valueChanges();

我也尝试过

this.items = database.list('cuisines/' + this.userId).valueChanges();

所有这些都使用与上面相同的 HTML。我没有收到明显的错误。当我 console.log(this.items) 时,我得到了这个:

Observable {_isScalar: false, source: Observable, operator: MapOperator}
operator
:
MapOperator {project: ƒ, thisArg: undefined}
source
:
Observable {_isScalar: false, source: Observable, operator: DistinctUntilChangedOperator}
_isScalar
:
false
__proto__
:
Object

目前,我的所有规则都尽可能公开设置,所以这不是问题。只是我的列表没有显示。我通过反复试验将其隔离到数据库路径。当我在数据库路径的代码中实际输入 userId 而不是 this.userId 时,我的列表也会正确显示。任何帮助都将不胜感激。

1个回答

问题出在这个块中:

constructor(private database: AngularFireDatabase, private auth: AngularFireAuth) {
  this.auth.authState.subscribe(user => {
    if(user) this.userId = user.uid
  });
  this.items = database.list(`cuisines/${this.userId}`).valueChanges();

您的 this.auth.authState.subscribe 注册了一个回调来捕获 this.userId ;但是,您在下一行立即使用了 this.userId ,此时您的订阅者尚未被调用(即使该值已经可用,您的回调也不会被调用,直到事件循环的下一个滴答)。

您只需移动此行:

this.items = database.list(`cuisines/${this.userId}`).valueChanges();

在订阅回调内。这意味着您的用户将等待片刻才能看到数据,因此您可能需要一个加载器或一条空消息。

RmxPatrick
2018-03-11