1

我在使用 websocket 和实时显示更改时遇到问题。我有一系列订单。该数组来自NodeJS后端服务器，来自调用ngOnInit()my 方法orderService.getOrders()，该方法通过 REST 调用从后端获取订单。在此之后，订单将使用正确的信息呈现到模板中。

我还使用 websockets 来处理两种类型的事件：（placeOrder当通过 POST 将新订单提交给支持者时）和updateOrder（当现有订单发生更改时）。

这是该代码的相关部分：

  webSocket.onmessage = function (event) {
      const message = JSON.parse(event.data);
      if (message === 'PlaceOrderEvent') {
        self.handlePlaceOrderEvent(message);
      } else if (message === 'UpdateOrderStatusEvent') {
        self.handleUpdateOrderEvent(message);
      }
    };

这工作正常，如果我可以在这两种方法中看到修改后的数据，console.log()但问题是只有在刷新页面后更改才会反映到模板中。

我已经尝试使用ChangeDetectorRef并调用detectChanges()和结束handle()方法，但没有成功。

如何实现这一点并在我的模板中实时显示新订单或在不刷新页面的情况下显示对现有订单的更改？

编辑：代码的更多相关部分

export class HomeComponent implements OnInit, OnDestroy {
  orders: Order[];

  constructor(private orderService: OrderService) { }

  ngOnInit() {
    this.getOrders();
    this.openWebSocket();
  }

    self.orderService.getOrders().subscribe(
      data => {
        if (data.error) {
          console.error(data.error);
        } else {
          if (Array.isArray(data)) {
            self.orders = data.map(function (o) {
            ...
            //parsing the data from the backend
    }

    openWebSocket() {
    ...
    //onmessage
      webSocket.onmessage = function (event) {
          const message = JSON.parse(event.data);
          if (message === 'PlaceOrderEvent') {
            self.handlePlaceOrderEvent(message);
          } else if (message === 'UpdateOrderStatusEvent') {
            self.handleUpdateOrderEvent(message);
          }
        };
    }

    handlePlaceOrderEvent(order) {
    const self = this;
    self.orders.unshift({
      ...
      //parsing the new order coming from websocket message
      status: self.statuses[0],
      placed: Date.now()
    });
   //<===== here I tried putting changeDetectorRef.detectChanges()
  }
4

0 回答 0