Angular中subscribe获取的数据如何渲染到Form UI并解决属性undefined问题

问题根因 #

• 执行顺序问题：表单初始化是同步执行逻辑，getItemDetails 接口请求是异步操作，回调执行时间晚于表单初始化，你初始化表单时 this.itemDetails 还未被接口返回值赋值，处于未定义状态，访问其属性自然会抛出 undefined 错误。
• 字段大小写不匹配：你表单中定义的字段是首字母大写的 Item1Qty，但接口返回的字段是小写开头的 item1Qty，就算后续拿到数据赋值也会出现匹配失败的问题。

修复方案 #

1. 调整表单初始化逻辑，配置默认值 #

初始化表单时先给字段赋默认占位值，不要直接读取未返回的异步数据：

this.wareHouseGroup = this.formBuilder.group({
  id: this.formBuilder.control(this.warehouse.id),
  sideId: this.formBuilder.control(this.warehouse.sideId?.toString() || '', [
    Validators.required,
    Validators.min(1)
  ]),
  itemDetail: this.formBuilder.group({
    // 字段名和接口返回保持一致，全小写开头，赋初始默认值0
    item1Qty: this.formBuilder.control(0),
    item2Qty: this.formBuilder.control(0),
    item3Qty: this.formBuilder.control(0)
  })
});

2. 接口拿到返回值后再给表单赋值 #

在接口请求的 subscribe 回调中，调用表单的 patchValue 方法批量赋值即可：

this.itemService.getItemDetails(this.item.uid).subscribe((result) => {
  this.itemDetails = result ?? {};
  // 给嵌套的itemDetail表单组批量赋值
  this.wareHouseGroup.get('itemDetail')?.patchValue(this.itemDetails);
  console.log(this.itemDetails);
});

3. 可选优化：避免加载阶段空状态 #

如果不想展示默认值，希望等接口数据返回后再渲染表单，可以在表单DOM上加判断：

<form *ngIf="itemDetails && wareHouseGroup" [formGroup]="wareHouseGroup">
  <!-- 你的表单控件代码 -->
</form>

内容的提问来源于stack exchange，提问作者Allison.A