Angular如何将异步获取的listTitle赋值给FormGroup响应式表单

问题根源 #

你遇到的是典型的异步代码执行顺序问题：this.listService.getListNo404 发起的是异步HTTP请求，subscribe 注册的回调函数只会在请求成功返回后才执行，而你当前的代码是按同步逻辑编写的，执行顺序如下：

1. 调用 getListTitle() 函数，先获取路由参数 listId
2. 发起HTTP请求，将回调函数放入异步队列等待执行，不会阻塞后续代码
3. 立刻执行回调外的 console.log(this.listTitle)，并返回此时还是初始值（通常是undefined）的 listTitle
4. 表单初始化完成，listTitle 字段被赋值为返回的初始值
5. 等HTTP请求成功返回后，才执行回调内的赋值逻辑，此时表单已初始化完成，你没有主动更新表单字段值，因此看不到赋值效果

解决方案 #

根据业务场景可以选择以下两种常用方案： #

方案1：先初始化表单，异步请求返回后更新字段值 #

适合表单需要提前渲染，等数据返回后再填充对应字段的场景

// ngOnInit生命周期中执行初始化和请求逻辑
ngOnInit(): void {
  // 第一步：先初始化表单，listTitle先给空默认值占位
  this.initForm();
  // 第二步：发起异步请求获取数据
  this.loadListTitle();
}

private initForm(): void {
  this.newList = this.fb.group({
    'listTitle': [''],
    'listId': ['873'],
    'listCreator': [this.username],
    'sublist': this.fb.array([this.initSublist()])
  });
}

private loadListTitle(): void {
  const listId = this.route.snapshot.paramMap.get('listId');
  this.listService.getListNo404(listId).subscribe(list => {
    // 请求返回后主动更新表单的listTitle字段
    this.newList.get('listTitle')?.setValue(list.listTitle);
    this.listTitle = list.listTitle;
  });
}

方案2：等待异步请求返回后再初始化表单 #

适合必须拿到所有初始值才能渲染表单的场景

ngOnInit(): void {
  const listId = this.route.snapshot.paramMap.get('listId');
  this.listService.getListNo404(listId).subscribe(list => {
    this.listTitle = list.listTitle;
    // 拿到返回值后再初始化表单，直接传入获取到的listTitle
    this.newList = this.fb.group({
      'listTitle': [this.listTitle],
      'listId': ['873'],
      'listCreator': [this.username],
      'sublist': this.fb.array([this.initSublist()])
    });
  });
}

注意事项 #

异步请求的订阅需要及时销毁避免内存泄漏，推荐配合takeUntil操作符在组件销毁时自动取消订阅，或在ngOnDestroy生命周期中手动调用订阅的unsubscribe方法。

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