我的应用程序有一个非常奇怪的问题。为了显示实时数据库,我必须与应用程序进行交互。2个月前我没有这个问题,信息显示正常,但现在,我必须点击一个按钮或其他东西才能更新视图。
我在这里制作了一个快速的 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
控制台记录得很好。数据恰好在我请求时显示在控制台中,但没有显示在屏幕上。
有任何想法吗?正如我所说,它曾经工作得很好。任何帮助都会很棒!谢谢
对于遇到此问题的任何其他人,这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())
}):
});
这对我来说非常有效。我找不到问题的实际原因,但我只是将NgZone
代码包裹在我所有的 firebase 函数中,并且它像以前一样工作。如果其他人有更多信息,那就太好了。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句