Observable Angular 没有按照我的预期工作

Question

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

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

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

例如：

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

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

Answer 2

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

您应该如何 obeservable 知道添加了新产品？服务器不会告诉您的客户“嘿，我有新物品，让我给您寄一些”。

您可以做的是：

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

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

最简单的方法是使用 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 来清除组件被销毁的时间间隔。

Observable Angular 没有按照我的预期工作

Observable Angular don't work how I expect

observable

angular