通过service的observable拿到数据正常，却无法存变量、填充表单如何解决？

1. 组件启用了ChangeDetectionStrategy.OnPush变更检测策略 #

如果你的组件配置了OnPush变更检测策略，只有输入属性变化、组件内部触发DOM事件、手动触发变更检测三类情况会触发视图更新，observable异步回调中修改数据不会自动触发视图刷新，这是这类问题最高发的原因。

• 解决方法：
  注入ChangeDetectorRef，在patchValue执行后手动标记组件需要更新：

  import { ChangeDetectorRef } from '@angular/core';
  
  constructor(private cdr: ChangeDetectorRef, /* 其他注入 */) {}
  
  fillForm(data: any) {
    this.datos = data
    console.log(this.datos)
    this.formactualizaruser.patchValue({
      nombre: this.datos.nombre, 
      hijos: this.datos.hijos,
    });
    // 新增以下代码手动触发变更检测
    this.cdr.markForCheck();
  }
  

2. Observable回调在Angular区域外执行 #

如果你的service中返回的observable来自第三方SDK、自定义DOM事件、Websocket回调等不受Angular NgZone管理的异步操作，Angular不会感知到数据变更，自然不会更新视图和变量绑定。

• 解决方法：
  注入NgZone，将赋值和表单填充逻辑包裹在run方法中，让变更检测正常触发：

  import { NgZone } from '@angular/core';
  
  constructor(private ngZone: NgZone, /* 其他注入 */) {}
  
  fillForm(data: any) {
    this.ngZone.run(() => {
      this.datos = data
      this.formactualizaruser.patchValue({
        nombre: this.datos.nombre, 
        hijos: this.datos.hijos,
      });
    })
  }
  

3. this上下文指向错误 #

如果你实际项目中subscribe的回调没有使用箭头函数、或者fillForm被作为独立方法传入其他逻辑调用，会导致fillForm内部的this不指向当前组件实例，自然无法给组件的datos变量和表单赋值。

• 解决方法：
  确认observable回调统一使用箭头函数，或者提前用bind绑定fillForm的上下文为当前组件实例。

4. 表单初始化时机晚于回调执行 #

如果你是在ngOnInit中才初始化表单，且observable返回速度极快，可能出现回调执行时表单还未完成初始化的情况，导致patchValue执行无效。

• 解决方法：
  将表单初始化逻辑移到组件constructor中，或者在fillForm中增加表单存在性判断：

  fillForm(data: any) {
    this.datos = data
    if (this.formactualizaruser) {
      this.formactualizaruser.patchValue({
        nombre: this.datos.nombre, 
        hijos: this.datos.hijos,
      });
    }
  }
  

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