Question

我在使用websockets时遇到问题并实时显示更改。我有一系列订单。这个数组来自一个 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()
  }

Angular 5 - 使用websockets时检测更改

0 个答案: