可观察的 Angular 不能按我的预期工作

Question

当新产品到货时，我的表格没有更新，我必须重新加载才能看到结果，这不是我想要的。我的预期结果：当从后端添加新产品到前端时必须更新表，这是我的代码：

Product.service.ts

getProducts(): Observable<Products[]> {
  return this.http.get<Products[]>(this.BASE_URL);
}

Admin-products.component.ts

ngOnInit(): void {
  this.productService.getProducts().subscribe((data) => {
    this.listOfData = data;
    console.log("data", data);
  });
}

Admin-products.component.html

<nz-table
  #sortTable
  [nzData]="listOfData"
  nzTableLayout="fixed"
  nzShowPagination
  nzShowSizeChanger
>
  <thead>
    <tr>
      <th *ngFor="let column of listOfColumn">{{ column.title }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of sortTable.data">
      <td>{{ data.name }}</td>
      <td>{{ data.price }}</td>
      <td>{{ data.type }}</td>
      <td>{{ data.category }}</td>
      <td>{{ data.subCategory }}</td>
      <td>{{ data.amount }}</td>
    </tr>
  </tbody>
</nz-table>

我不知道我在这里遗漏了什么，也许问题是我在 nodejs 中的服务器与 express 这是我的服务器响应：

Nodejs 服务器

router.get("/products", (req, res) => {
  mysqlConnection.query("SELECT * FROM products", (err, rows, fields) => {
    if (!err) {
      res.json(rows);
    } else {
      console.log(err);
    }
  });
});

有什么想法吗？

Answer 1

你误解了 Obersvables。它们按预期在这里工作，并在请求完成时触发一个事件，因此数据会显示在您的表中。但你总是必须先提出请求。您必须“向服务器询问”新数据。

您应该如何观察到添加了新产品？服务器不会告诉你的客户“嘿，我有新物品，请我给你寄一些”。

你可以做的是：

1. 使用 setInterval 函数每隔 X 秒发出一个新请求，以获取新产品
2. 添加刷新按钮以手动请求新数据（此按钮随后发出新请求以更新数据）
3. 在创建新产品后立即使用 Websocket 向客户端发送数据。

最后一个需要更多的工作。

最简单的方法是使用setInterval 或创建一个刷新按钮。我给你看一个 setInterval 的例子：

myInterval; //You need this to clear it later
...
ngOnInit(): void {
    this.myInterval = setInterval(() => {
      this.productService.getProducts().subscribe(data=> {
        this.listOfData = data;
        console.log('data', data);
      });
    }, 60000)
  } 

ngOnDestroy() {
   clearInterval(myInterval)
}

只要组件处于活动状态，它就会每 60 秒请求一次新数据。您需要实现 OnDestroy 以清除组件被销毁的时间间隔。

Answer 2

您将不得不重复您的请求。另一种可能的解决方案是使用websocket 连接来实时获取信息。

例如：

客户 A 创建产品。您的后端将其写入数据库并通过 websocket 连接告诉所有正在监听的客户端有一个新产品。

客户端 B 收到此信息并触发新的“getProducts”请求。