代码之家 › 专栏 › 技术社区 › Simon

Ionic+FireBase-实时数据库未更新视图

ionic2 firebase-realtime-database ionic-framework angular javascript

Simon · 技术社区 · 6 年前

我的申请有一个很奇怪的问题。为了显示实时数据库,我必须与应用程序交互。两个月前我没有这个问题,信息显示正常,但现在,我不得不点击一个按钮或其他东西,以便视图更新。

我在这里做了一个快速的gif:

如果你在我点击 <- back 巴顿你会明白我的意思。 https://i.gyazo.com/44b450aa502dc7f37e5a5feea19824c6.mp4

我不知道我是怎么做到的..

下面是我的应用程序的代码示例:

.ts :

  if(fromClick) { this.subscription.off(); }
  this.postFeed = new Array();
  this.subscription = this.database.database.ref('/posts/'+this.locationId)
  .orderByChild('score')
  .limitToLast(10);
  this.subscription.on('child_added', (snapshot) => {
        this.postFeed.push(snapshot.val())
  });

.html :

  <ng-container *ngFor="let post of postFeed.reverse(); let i = index">
    <post [postData]="post"></post>
  </ng-container>

因此,上面的代码曾经工作得很好,但现在我必须与我的应用程序进行交互才能将其显示在屏幕上,即使 postFeed 控制台日志非常好。 当我请求时,数据会显示在控制台中,但不会显示在屏幕上。

有什么想法吗?正如我所说,它过去工作得很好。任何帮助都很好!谢谢你

1 回复 | 直到 6 年前

Simon 6 年前

对于其他有这个问题的人, NgZone 这就是我的答案。

我进口的:

import { NgZone } from '@angular/core';

添加到构造函数中:

public zone: NgZone,

然后把它包装在我的firebase代码中:

  this.zone = new NgZone({});
  if(fromClick) { this.subscription.off(); }
  this.postFeed = new Array();
  this.subscription = this.database.database.ref('/posts/'+this.locationId)
  .orderByChild('score')
  .limitToLast(10);
  this.subscription.on('child_added', (snapshot) => {
    this.zone.run(() => {
        this.postFeed.push(snapshot.val())
     }):
  });

这对我来说非常有效。我找不到真正的原因但我刚刚把 恩格兰 围绕我所有的firebase函数编写代码,它的工作方式和以前一样。如果其他人有更多的信息那就太好了。

推荐文章

Veselin Zinkov · Firebase实时数据库Web界面可视化错误

2 年前

Gusta · 为什么是我的物品。values()当我的对象数组有匹配的值时返回false?

2 年前

Gusta · 为什么我在尝试设置状态时会得到太多渲染?

2 年前

Alex · 如何使用javascript在firebase中进行过滤?

2 年前

Salvo · 函数无法读取useState参数

2 年前

Ejaj Ahmad · 如何从函数返回firebase数据?

2 年前

Amit Yadav · 如何使用javascript从firebase中的键获取值

2 年前

Yeury De los Santos · 在firebase实时数据库android中恢复删除的子项

2 年前

Andromeda · Firebase云函数已完成,状态为“错误”

6 年前

Janith Warnamana · 从firebase数据库检索数据到getvalue中的listview null

6 年前