Angular：从 Firestore 获取数据。在单击之前，HTML 不会使用实时数据更新答案

【问题标题】：Angular: Getting data from Firestore. HTML not updating with realtime data until clickedAngular：从 Firestore 获取数据。在单击之前，HTML 不会使用实时数据更新
【发布时间】：2019-07-11 00:58:31
【问题描述】：

我正在使用 Angular 构建一个小型 Web 应用程序。

我查询了一个 Firestore 数据库并取回数据。一旦我收到数据，我必须显示它。但是，在我单击应用程序中的其他位置（或其他位置）之前，显示数据的应用程序区域不会刷新。

我对数据使用 Observable，并且我有一个订阅者，它在数据更新时触发（console.log）——但是 UI 不是。

我已经尝试ChangeDetectorRef 和detectChanges 并且在使用*ngIf 准备好数据之前不加载html

我有一个正确触发的订阅者方法

ngOnInit() {
  console.log("inited component.");
  obs$.subscribe(value => {
    console.log("Data List Update: (" + value.length + ") items in our dataset");
  })
}

在我的组件 html 文件中，我有：

<div *ngFor="let item of obs$ | async; trackBy: trackByFn">
  <h2>{{item.name}}</h2>
</div>

当调用 subscribe 函数时，我应该会看到 html 列表立即填充，但这不会发生，直到它被另一个事件通过 angular 刷新。

【问题讨论】：

将其标记为关闭主题，因为该问题不再可重现。

标签： angular firebase google-cloud-firestore

【解决方案1】：

认为您只是误解了它的工作原理。

您需要分配您获得的值，以便 html 知道里面是什么。试试这个：

obs$.subscribe(value => {
  this.items = value;
  console.log("Data List Update: (" + value.length + ") items in our dataset");
})

<div *ngFor="let item of items">
  <h2>{{item.name}}</h2>
</div>

【讨论】：