为什么 AngularFire 不返回我的 Firestore 集合中的最新数据？

Question

所以我正在尝试构建一个实时应用程序来在后台抓取数据（使用函数）并将其显示在 Angular 应用程序上。 这些功能按预期工作并全天更新我的 Firestore 集合。 将最新数据获取到我的前端是问题所在。

我首先订阅过滤集合的valueChanges 。 这对于获取初始数据非常有效，但似乎未检测到更改，并且 UI 永远不会使用新数据进行更新。

getRunners(raceUid: string, date: Date): Observable<Runner[]> {
  return this.firestore
    .collection<Runner>(Collections.Runners, (ref) =>
      ref.where('raceUid', '==', raceUid)
        .where('created', '>=', date)
        .orderBy('created', 'asc')
        .orderBy('number', 'asc'),
    )
    .valueChanges();
}

之后，我尝试通过订阅以 10 秒为间隔观察到的相同valueChanges来轮询更新的数据。 但是 UI 仍然没有更新新数据，即使我的订阅回调确实在运行。

当我请求它时，我知道更改就在那里，因为当我刷新页面时，所有更改都会显示。 所以初始调用获取最新数据但似乎之后它可能只使用本地缓存并且永远不会检索实时数据？ 那可能吗？

我正在使用 AngularFire 7.4.1 并且我没有在我的app.module中明确启用或禁用持久性。

编辑：这是我调用getRunners方法的代码。 这个用于投票：

this.updateInterval$
      .pipe(
        switchMap(() =>
          this.runnerService.getRunners(raceUid, new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate(), 0, 0, 0)),
        ),
        takeUntil(this.raceChange$),
      )
      .subscribe((runners) => {
        this.runners = runners;
        this.lastUpdated = new Date();
      });

这是我最初的开始：

this.runnerService
      .getRunners(raceUid, new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate(), 0, 0, 0))
      .pipe(takeUntil(this.destroy$))
      .subscribe((runners) => {
        this.blockUi.stop();
        this.runners = runners;
        this.lastUpdated = new Date();
      });

Answer 1

使用.pipe和map方法将 Runners 快照更改映射到所需类型，如下所示：

在职：

getRunners(raceUid: string, date: Date): Observable<Runner[]> {
  return this.firestore
    .collection<Runner>(Collections.Runners, (ref) =>
      ref.where('raceUid', '==', raceUid)
        .where('created', '>=', date)
        .orderBy('created', 'asc')
        .orderBy('number', 'asc'),
    )
    .snapshotChanges()
    .pipe(
      map((snapshots) => {
        return snapshots.map((snapshot) => {
          const data = snapshot.payload.doc.data();
          const id = snapshot.payload.doc.id;
          const updateTime = snapshot.payload.doc.updateTime;
          return { id, updateTime, ...data };
        });
      }),
    );
}

在 Component 中，我们获取涉及类型安全的 runners 对象，然后在订阅时您可以实现有关 runners 的逻辑。

this.runnerService
  .getRunners(raceUid, new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate(), 0, 0, 0))
   .pipe(takeUntil(this.destroy$))
  .subscribe((runners) => {
        this.blockUi.stop();
        this.runners = runners;
        this.lastUpdated = new Date();
      });