使用OnPush变更检测时为何无法检测到状态变化？

你的问题出在订阅回调的执行时机上：Angular的OnPush变更检测只会在特定场景触发，而你在subscribe回调里更新periodData的操作，是在Angular的变更检测周期之外完成的，所以Angular没察觉到这个引用变化，自然不会更新模板。

为什么默认策略能工作？ #

默认的变更检测策略会在每个异步操作（比如点击事件、HTTP请求完成）后，从头到尾遍历组件树检查变化，所以即使在subscribe里更新数据，它也能检测到。但OnPush只会在以下情况触发：

• 组件的@Input属性引用发生变化
• 组件自身触发了事件（比如点击、输入）
• 手动触发变更检测
• 使用async管道（它会自动触发变更检测）

解决办法（两种常用方案） #

1. 使用async管道替代手动订阅
   这是Angular推荐的方式，async管道会自动管理订阅，并且在数据更新时触发变更检测。直接在模板里使用：

   <div *ngFor="let p of periodData$ | async">{{p}}</div>
   

   这样你可以去掉组件里的手动订阅代码，不用再维护periodData这个变量，代码更简洁也不容易出错。

2. 手动触发变更检测
   如果一定要保留手动订阅，需要注入ChangeDetectorRef，在更新数据后手动通知Angular检测变化：

   import { ChangeDetectorRef } from '@angular/core';
   
   constructor(private cdr: ChangeDetectorRef) {}
   
   // 订阅回调里更新后触发检测
   this.periodData$.subscribe((pd) => {
     this.periodData = [...pd];
     this.cdr.markForCheck(); // 标记组件需要检测变化
     // 或者用 this.cdr.detectChanges(); 直接触发当前组件及子组件的检测
   });
   

额外提示 #

尽量优先用async管道，它能避免很多手动订阅带来的问题（比如内存泄漏、变更检测时机问题），也是Angular的最佳实践之一。

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