Angular 16中Async Pipe在Observable变更时不更新视图问题

核心排查点1：组件继承服务导致实例不共享（最可能原因） #

你当前让FilterComponent继承GlobalDataService是错误的实现逻辑。Angular全局服务（providedIn: 'root'）是单例模式，组件继承服务会导致每个组件实例创建独立的服务副本：

• FilterComponent里调用this.dataArray$.next()的是组件自身的服务实例
• 视图组件（app-data-items）注入的是全局单例服务实例
  两者的dataArray$并非同一个BehaviorSubject，视图自然不会响应更新。

修复方式：
删除继承逻辑，改为在FilterComponent中注入GlobalDataService：

// FilterComponent.ts
export class FilterComponent {
  constructor(private globalDataService: GlobalDataService) {}

  public triggerFilter(option: string): void {
    const filteredData = someData.filter(item => item.array.includes(option));
    this.globalDataService.dataArray$.next(filteredData);
  }
}

其他排查步骤 #

若上述修复后问题仍存在，依次检查以下内容：

1. 确认视图组件注入的是正确的服务实例 #

确保app-data-items组件通过依赖注入获取GlobalDataService，而非手动创建实例：

// AppDataItemsComponent.ts
constructor(private globalDataService: GlobalDataService) {}

// 模板中需使用注入服务的dataArray$
// <ng-container *ngIf="globalDataService.dataArray$ | async as dataArray">

2. 验证filteredData是全新数组 #

虽然filter()方法会返回新数组，但如果someData引用了BehaviorSubject中的原数组，可通过打印确认新数组的独立性：

const filteredData = someData.filter(item => item.array.includes(option));
console.log(filteredData === this.dataArray$.value); // 应为false，说明是新数组
this.dataArray$.next(filteredData);

3. 检查组件的变更检测策略 #

如果app-data-items组件使用了ChangeDetectionStrategy.OnPush，可手动验证变更检测是否触发：

// AppDataItemsComponent.ts
constructor(private cdr: ChangeDetectorRef) {}

// 仅用于排查：在订阅回调中手动触发变更检测
this.globalDataService.dataArray$.subscribe(() => {
  this.cdr.markForCheck();
});

4. 确认BehaviorSubject的订阅未被意外取消 #

async pipe会自动管理订阅，但如果视图组件在ngOnDestroy中手动取消了自定义订阅（比如自己订阅dataArray$后执行unsubscribe），会导致视图停止接收更新，检查组件代码中是否存在此类逻辑。

5. 验证服务中的值确实已更新 #

在GlobalDataService中添加日志，确认next操作确实触发了值变更：

// GlobalDataService.ts
public dataArray$: BehaviorSubject<Data[]> = new BehaviorSubject(someData);

constructor() {
  this.dataArray$.subscribe(newValue => {
    console.log('服务中dataArray$已更新:', newValue);
  });
}

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