Angular订阅ruleService服务时注释this.rules赋值后组件模板空白问题

该问题本质是 Angular 变更检测机制与模板绑定依赖 共同作用的结果，常见触发场景有两类：

场景1：模板存在对 this.rules 的隐式强依赖 #

你大概率在手动搭建的表格外层，用结构型指令（如 *ngIf="rules"、*ngIf="rules?.length"）做了空值保护，避免数据未加载时模板访问 rules 属性触发报错。

• 正常写法下：this.rules = res 会把服务返回的非空数组赋值给 this.rules，此时 *ngIf 判断条件满足，包裹在指令内的整个表格、下拉列表模板才会被正式渲染。
• 异常写法下：注释掉 this.rules = res 后，this.rules 保持初始的 undefined/null 值，导致外层 *ngIf 条件不成立，整个组件的渲染内容被结构型指令移除，最终表现为组件区域全空白。而 console.log(this.optionsSelect) 是在 JS 逻辑层执行的，不受模板渲染逻辑影响，所以能正常打印出填充后的数据。

场景2：组件配置了 OnPush 变更检测策略 #

如果组件设置了 changeDetection: ChangeDetectionStrategy.OnPush，Angular 仅在以下场景触发组件视图更新：

• 组件的 @Input() 绑定值发生引用替换（而非对象/数组内部属性修改）
• 组件或子组件触发原生 DOM 事件
• 手动调用 ChangeDetectorRef.markForCheck() 标记组件需要检测
• 通过 async 管道订阅 Observable 自动触发检测

这种场景下：

• 正常写法中：this.rules = res 属于引用替换操作，会被 OnPush 策略识别为变更信号，触发整个组件的视图重渲染，此时已经 push 完成的 optionsSelect 数据会同步渲染到下拉列表中。
• 异常写法中：你仅通过 push 方法修改 this.optionsSelect 的内部内容，没有改变 this.optionsSelect 本身的数组引用，同时缺少其他能触发 OnPush 检测的信号，Angular 会判定组件无变更，不会重新渲染模板，最终表现为模板空白、但控制台能正常打印数据。

辅助排查方向 #

如果上述两个场景都不匹配，可逐一确认：

• 组件初始化时 this.rules 的默认值，检查模板中是否存在未加可选链保护的 rules 属性访问（如 {{ rules.length }}），无赋值时这类访问会触发渲染中断，导致组件内容空白。
• 查看浏览器控制台的 Error 级别日志，确认是否存在被拦截的渲染异常。

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