Angular中Async管道未更新HTML视图的问题及替代解决方案咨询

我最近遇到个挺闹心的问题，明明Angular的Async管道应该自动帮我处理订阅和视图更新，但实际运行起来却不是这么回事。先给大家看看我的代码：

HTML 代码 #

@if(data$ | async; as data) {
  <span>{{data.status}}</span>
}

TypeScript 代码 #

dataId = input.required<string>();
data$ = EMPTY;

ngOnInit() {
  if(this.dataId()) {
    data$ = this.getData(this.dataId()).pipe(tap(console.log));
  }
}

具体问题是这样的：当我在另一个组件里做了数据修改操作后，控制台能清晰看到getData()的输出流程——先打印原始值，接着打印更新后的值：

ready
"Data change submited" // 这行是REST请求完成后的日志
not-ready

但诡异的是，HTML视图里一直停留在ready状态，完全不更新成最新的not-ready。

目前我想到了两个解决思路，但都不太合心意：

• 手动通过ChangeDetectorRef触发变更检测：要写一堆额外的样板代码就为了触发检测，实在太冗余了
• 把逻辑转成Signal实现：这样就丢了Async管道自动管理订阅的简洁性，还得把整个数据流都改成Signal的写法，感觉有点没必要

想请教下各位，有没有更优雅的替代方案呀？

内容来源于stack exchange