Angular 和 Firebase - 自动数据库恢复

Question

我尝试创建一个网站，为我的学校作业提供文本课程。我已经完成了身份验证和课程备份。现在，我尝试创建实时聊天。但是，当我更改数据库时，必须重新加载网站才能进行更改。如何在不重新加载的情况下做到这一点？

我的加载脚本服务：

import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";

@Injectable()
export class CoursService {
  liste_cours = []

  constructor(private httpClient: HttpClient) {
    this.getCoursFromServer()
  }

  saveCoursToServer() {
    this.httpClient
      .put("https://databaselink/cours.json", this.liste_cours)
      .subscribe(
        () => {
          console.log("Enregistrement terminé!");
        },
        error => {
          console.log("Erreiorr ! : " + error);
        }
      );
  }

  getCoursFromServer() {
    this.httpClient
      .get<any[]>("https://databaselink/cours.json")
      .subscribe(
        response => {
          this.liste_cours = response;
          console.log("Loading finish");
        },
        error => {
          console.log("Error!: " + error);
        }
      );
  }
}

感谢您的回答！

Answer 1

您似乎正在通过向 Firebase 实时数据库发出 HTTP 请求来访问它。这意味着您在进行 HTTP 调用时获取当前数据，但之后不会收到数据更新。当您重新加载页面时，您将再次获得最新数据。

有几种方法可以让您的页面在数据更改时自动更新，而无需用户重新加载页面。

使用 Firebase SDK。这是迄今为止最简单的方法，因为 Firebase 具有适用于普通 JavaScript, and for Angular apps. When you integrate these SDKs, you can get realtime updates by attaching an on('value' listener, or by subscribing to the node.
定期在您的页面中执行 HTTP 请求，这称为轮询数据。这也是一种非常简单的方法，但如果您的数据不经常更改，则效率会非常低。
为 Firebase 的流式 REST 实施客户端 API。这非常复杂，通常只能在没有 Firebase SDK 的平台上完成，或者由想要了解更多协议的爱好者完成。

我强烈建议您按照给出的顺序考虑这些解决方案。

Angular 和 Firebase - 自动数据库恢复

Angular and Firebase - Automatic database recovery

database

reload

firebase

typescript

angular