Angular中用RxJS实现股票动态更新，为何HTML仅显示初始值？

问题原因 #

原生WebSocket的onmessage回调运行在Angular变更检测的上下文之外，导致Angular无法感知到Subject推送的新数据，因此页面不会同步更新。

具体修复步骤 #

• 注入NgZone服务
  在组件中引入并注入NgZone，确保数据更新操作处于Angular的变更检测范围内：

  import { Component, NgZone, OnInit, OnDestroy } from '@angular/core';
  import { BehaviorSubject, Observable, Subscription } from 'rxjs';
  import { Stock } from './stock.model';
  
  export class AppComponent implements OnInit, OnDestroy {
    private webSocket: WebSocket;
    private subscription: Subscription = Subscription.EMPTY; 
    public stock: Stock = new Stock();
    public stockSubject: BehaviorSubject<Stock> = new BehaviorSubject<Stock>(this.stock);
    public stock$: Observable<Stock> = this.stockSubject.asObservable();
  
    constructor(private ngZone: NgZone) {} // 注入NgZone服务
  
    ngOnInit(): void {
      this.webSocket = new WebSocket('ws://localhost:8080/stocks');
      
      this.webSocket.onmessage = (event) => {
        // 用NgZone包裹逻辑，触发Angular变更检测
        this.ngZone.run(() => {
          this.stock = JSON.parse(event.data.toString());
          this.stockSubject.next(this.stock);
          console.log(JSON.stringify(this.stock));
        });
      };
    }
  
    ngOnDestroy(): void {
      this.webSocket.close();
      this.subscription.unsubscribe();
    }
  }
  

• 移除冗余订阅
  删除代码中this.subscription = this.stock$.subscribe();这一行，因为HTML模板中的async管道已经自动处理了订阅与退订逻辑，手动订阅只会造成不必要的资源占用。

补充说明 #

如果不想使用NgZone，也可以通过注入ChangeDetectorRef并调用detectChanges()方法手动触发变更检测，但NgZone的方式更贴合Angular的运行机制，能确保所有相关变更被正确捕获。

内容的提问来源于stack exchange，提问作者Steve Lucord