Javascript 在窗体组内部的窗体数组中循环

我从服务器获取数据列表，并希望在跨度列表中显示它们，如下所示：

每行对应于列表的一项，请注意，我使用

*ngFor

创建此列表，如下所示：

this.myForm=this.fb.group({
人物：this.fb.array([
本集团({
姓名：['']，
地址：['']
})
])
})

运行此代码后，浏览器会给出以下信息：

错误：

路径为“person->0->name”的表单控件没有值访问器

但我知道我应该在for循环中使用

myForm.controls.person.controls

而不是

serverData

，但我希望同时使用列表和控件

---

我应该使用两个for循环，其中一个循环遍历服务器数据，另一个循环遍历表单控件，还是应该使用另一种方式？

注意：我喜欢循环位于fromGroupName的div中

<form [formGroup]="myForm">
      <div formArrayName="person"> >
          <div *ngFor="let person of serverData; let personIndex = index"
               [formGroupName]="personIndex">
              <span formControlName="name">{{person.name}}</span>
              <span formControlName="address">{{person.address}}</span>
          </div>
      </div>
</form>

>
{{person.name}
{{个人地址}

---

如果在myForm.controls.person.controls上迭代，则始终formGroupName有值，如果在创建表单之前有数组并声明，则在应用程序的第一个状态下，FormArray不会创建

您必须将所有对象从

服务器数据

推送到FormArray，使数组长度与

serverData

数组相同。模板保持当前状态，但在组件中，映射

serverData

中的值，并将具有所需属性的对象推送到formarray：

构造函数（私有fb:FormBuilder）{}
恩戈尼尼特（）{
this.myForm=this.fb.group({
人员：this.fb.array（[]）
});
这是数据（）；
}
获取人物（）{
将此.myForm.get（“人员”）作为FormArray返回；
}
私有数据（）{
this.serverData=[
{
名称：“1”，
描述：“一个”
},
{
名称：“2”，
描述：“两个”
},
{
名称：“3”，
描述：“三个”
}
];
this.serverData.map（d=>
this.person.push（this.fb.group（{name:d.name，address:d.desc}））
);
}

---

演示：

如我在问题中所示，我没有使用“myForm.controls.person.controls”。现在，我在ngAfterViewInit（）中设置了值，正如您所说，在创建表单之前我不会声明数组。但仍然不起作用。@EliseoYou不能在跨度上设置formcontrolnames。如果只是在跨度上显示，为什么还要为此使用表单呢？这是一个与我的实际代码类似的示例。实际上，在这些span@AJT82附近有一个类型为“hidden”的输入，然后仅在这些输入字段上设置FormControlName？好。假设有两个输入，而不是这些跨距。你能帮我吗？是的，我会帮你的，请提供一个我不知道这些输入在哪里。至于您的注释，如果您只是用输入替换跨度，您的代码将正常工作。