Question

为什么我的清单不会显示，我感到很沮丧。

我正在使用Firebase实时数据库，我在使用最简单的结构检索和显示节点下的数据时没有任何问题。例如，从中检索数据 - |菜肴 - | itemId -key：价值工作得很好。

在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，则不会显示数据。

所以，在菜肴中，我有

  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”时，我的列表也会正确显示。任何帮助将不胜感激。

Answer 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();

在订阅回调中。这意味着您的用户将等待一段时间查看数据，因此您可能需要加载程序或空消息。

为什么不显示Firebase实时数据库列表？使用Ionic和AngularFire2

1 个答案: