Arrays 使用formBuilder angular 2在formArray中创建动态formGroup

我的后端有一个名为media的阵列，它存储多个对象。它看起来像这样：

"media": [
    {
        "srcId": null;
        "primary": false,
        "thumbs": {
            "default": null
        },
        "type": null,
        "raw": null
    }
]

  media: this._fb.array([
    this._fb.group({
      srcId: new FormControl(this.existingMedia.srcId),
      type: new FormControl(this.existingMedia.type),
      raw: new FormControl(this.existingMedia.raw),
      primary: new FormControl(this.existingMedia.primary),
      thumbs: this._fb.group({
        default: new FormControl(this.existingMedia.thumb.default)
      })
    })
  ]),

将此数组加载到表单中的My edit-component.ts如下所示：

"media": [
    {
        "srcId": null;
        "primary": false,
        "thumbs": {
            "default": null
        },
        "type": null,
        "raw": null
    }
]

  media: this._fb.array([
    this._fb.group({
      srcId: new FormControl(this.existingMedia.srcId),
      type: new FormControl(this.existingMedia.type),
      raw: new FormControl(this.existingMedia.raw),
      primary: new FormControl(this.existingMedia.primary),
      thumbs: this._fb.group({
        default: new FormControl(this.existingMedia.thumb.default)
      })
    })
  ]),

现在，这将加载该媒体阵列中的第一个对象，但不会加载阵列中的其他媒体对象。 是否有办法使formArray介质中的formBuilder组与后端介质阵列中的对象数量保持动态关系

任何帮助/提示/建议都将不胜感激

更新

在我的ngOnInit中，我有：

  this.currentCard = selectedCurrentCard;
  for (let medias of this.currentCard.media){
    this.existingMedia = medias;

在后端和上迭代我的媒体阵列

  const control = <FormArray>this.cardForm.controls['media'];
    control.push(this.initCurerntMedia()); 

const control=this.cardForm.controls['media']；
control.push（this.initCurerntMedia（））；

initCurrentMedia（）如下所示： 更新的initCurrentMedia（）在@AJT_82的帮助下，在ngOnInit（）中调用此更新版本时，此版本可以正常工作

initCurrentMedia() {
    this.currentCard.media.forEach(media => {
      const control = <FormArray>this.cardForm.controls['media'];
      control.push(
        this._fb.group({
          srcId: new FormControl(media.srcId),
          type: new FormControl(media.type),
          raw: new FormControl(media.raw),
          primary: new FormControl(media.primary),
          thumbs: this._fb.group({
            default: new FormControl()
          })
        })
      )
    })
  }

initCurrentMedia（）{
此.currentCard.media.forEach（媒体=>{
const control=this.cardForm.controls['media']；
控制按钮(
这个({
srcId:newformcontrol（media.srcId），
类型：新窗体控件（媒体类型），
原始：新表单控件（media.raw），
主：新窗体控件（media.primary），
拇指：这个({
默认值：newformcontrol（）
})
})
)
})
}

---

用当前媒体填充我的表单。它仍然只是填充一个对象。

我喜欢构建表单

this.myForm=this.\u fb.group({
媒体：此.\u fb.array（[]）
})

然后在获取响应后设置值，以便在获取响应后可以调用一个方法，比如说

setForm（）

：

setForm（）{
this.media.forEach（x=>{
this.myForm.controls.media.push(
这个({
srcId:x.srcId，
类型：x.type，
原始：x.raw，
小学：x.primary，
拇指：这个({
默认值：x.thumbs.default
})        
)
})
})
}

我正在遵循您的逻辑@AJT_82，但我收到一个关于类型AbstractControl上不存在的属性forEach的typescript错误。好吧

这个。媒体

应该指向响应，而不是formarray。看来你现在正在尝试迭代formarray？双重命名确实有点混乱，您可能应该重命名其中一个：）您是正确的。我让它工作。我必须添加const control=this.myForm.controls['media']；control.push（之后它就开始工作了。谢谢@AJT_82！！！没问题，很高兴听到它工作了！奇怪的是，上面的代码完全一样（没有将formarray的变量声明为变量）没有按原样工作，到目前为止，它对我来说工作得很好。最重要的是，它现在可以工作了！祝您有一个好的，并且很高兴为您编码！：）