如何将服务返回数据推入含FormGroup的Angular FormArray表单？

没问题，我来帮你搞定这个Angular表单数据填充的问题！根据你给出的代码结构，你可以按照以下步骤来实现把服务返回的数据推入对应的表单数组：

核心思路 #

首先要确保服务返回的数据结构和你的FormGroup结构匹配，然后清空原有的表单数组（如果需要替换初始的空组），接着遍历返回的数据，逐个创建表单组并填充值，最后推入significantOwners这个FormArray中。

具体代码实现 #

假设你的服务返回的数据是一个包含多个所有者对象的数组（每个对象有name字段），你可以在服务调用的订阅回调里做如下处理：

// 调用你的服务获取数据
this.yourDataService.getSignificantOwners().subscribe((ownerList: any[]) => {
  // 1. 先清空现有的表单数组，避免初始的空组或旧数据残留
  this.significantOwners.clear();

  // 2. 遍历服务返回的每个所有者数据
  ownerList.forEach(owner => {
    // 3. 调用你已有的buildSignificantOwnerGroup创建表单组
    const ownerGroup = this.buildSignificantOwnerGroup();
    // 4. 用patchValue填充表单组的对应字段（如果数据和表单字段完全匹配，也可以用setValue）
    ownerGroup.patchValue({
      name: owner.name
      // 如果你的表单组还有其他字段，比如address，这里继续添加对应的数据映射
    });
    // 5. 将填充好的表单组推入表单数组
    this.significantOwners.push(ownerGroup);
  });

  // 如果你想更简洁，也可以直接在创建表单组时传入初始值，省略patchValue步骤：
  // ownerList.forEach(owner => {
  //   this.significantOwners.push(this.fb.group({
  //     name: owner.name
  //   }));
  // });
});

注意事项 #

• 如果服务可能返回空数组，记得处理这种情况，避免表单数组里留下不必要的空组。
• 确保服务返回的每个数据对象的字段名和你表单组里的控件名完全一致，这样patchValue才能正确映射。
• 如果你希望保留初始的空组（比如允许用户添加新的所有者），可以跳过clear()步骤，直接在现有数组后追加新的表单组。

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