Angular 12：异步GET请求返回后ngModel变量不更新、双向绑定失效

问题排查及解决方案 #

按优先级依次排查以下项：

1. 检查FormsModule导入情况
   这是最符合你当前现象的核心原因：双向绑定[(ngModel)]依赖@angular/forms的FormsModule，如果你当前组件属于子模块/是独立组件（Angular14+），仅在根模块导入是无效的：

   • 若使用NgModule：在当前组件所属的NgModule的imports数组中添加FormsModule
   • 若使用独立组件：在当前组件@Component装饰器的imports数组中添加FormsModule
     你提到另一个组件相同逻辑可正常运行，大概率是另一个组件所在的模块已经正确导入了FormsModule。

2. 修正模板绑定语法
   你的模板代码里多写了this.前缀，Angular模板的上下文默认就是组件实例，不需要加this，修改为：

   <input type="text" class="form-control" name="name" id="name" 
          required minlength="2" [(ngModel)]="worker.name">
   

3. 检查变更检测策略配置
   如果你在组件装饰器中开启了changeDetection: ChangeDetectionStrategy.OnPush，异步回调更新对象后需要手动触发变更检测：

   // 先注入ChangeDetectorRef
   constructor(private cdr: ChangeDetectorRef) {}
   
   // 赋值后调用
   this.worker = await (await this.session.apiManager.WorkerApi.getWorker(this._id)).toPromise();
   this.cdr.markForCheck();
   

额外代码优化建议 #

你当前的异步逻辑混用了Observable和async/await，存在时序隐患：

• 原getId方法返回的是订阅对象，await并不会等待路由参数回调执行，建议改为用firstValueFrom包装路由参数，或者直接用RxJS操作符串联请求，避免嵌套异步逻辑。
• toPromise已在RxJS 7+中弃用，建议替换为firstValueFrom/lastValueFrom。

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