使用Observables时Material Angular进度条value值不更新如何解决？

Angular 依赖 NgZone 服务监听异步事件来自动触发变更检测、更新视图。而 Server Sent Event（SSE）的原生回调执行上下文默认处于 Angular 的 NgZone 管理范围之外，所以你在回调里更新 progressValue 后，Angular 感知不到变量变化，不会触发视图重绘。只有当你点击页面时，浏览器的交互事件被 NgZone 捕获，才会触发一次全局变更检测，把之前积压的变量更新同步到视图上。

你已经采用的手动把变量更新逻辑包裹在 NgZone.run() 里是标准解决方案，核心是把回调逻辑重新纳入 Angular 的变更检测管理范围，变量更新后会立刻触发视图刷新。
具体实现步骤：

1. 在组件构造函数中注入 NgZone

import { NgZone } from '@angular/core';

constructor(private ngZone: NgZone) {}

2. 调整 SSE 订阅的回调逻辑

getEventStream(){
  this.progressValue = 0;
  this.mySub = this.docServ.getEvents().subscribe((res:MyMessage) => {
    // 将更新逻辑包裹在ngZone.run中，触发Angular变更检测
    this.ngZone.run(() => {
      this.progressValue =  Math.round(( res.currentIndex / res.finalIndex ) * 100);
    })
  });
}

除此之外还有两种可选实现方案：

• 手动触发变更检测：注入 ChangeDetectorRef，更新变量后调用 detectChanges() 方法即可刷新当前组件及子组件的视图
• 给 SSE 服务层的请求逻辑统一套上 NgZone 封装，一劳永逸解决所有 SSE 回调的变更检测问题

内容的提问来源于stack exchange，提问作者S-Wing