处理对象数组而不是具有角度2形式的嵌套对象的对象

Question

我正在使用angular 2表单来填充和编辑我的应用中的信息。当谈到后端数据模式的图像时，它看起来像这样：

media {
       featured: "Url string", <!-- designated default image -->
       other: {
               img1: "Url string", <!-- secondary images -->
               img2: "Url string",
               img3: "Url string",
               img4: "Url string",
               img5: "Url string",
               img6: "Url string"
              }
      }

但是现在它已经改为看起来像这样：

media: [
    {
       thumbs: {
                 default: "Url string",
               }
       primary: boolean, <!-- whether or not image is the default image -->
       type: string,
       raw: "Url string of image"
    {

我当前的form.ts处理这样的图像：

 let featured = '';
 let img1 = '';
 let img2 = '';
 let img3 = '';
 let img4 = '';
 let img5 = '';
 let img6 = '';


  if (this.otherMode) {
  const pendingCards = this.pendingCardsComponent.getPendingCard(this.id);
  featured = pendingCards.media.featured;
  img1 = pendingCards.media.other.img1;
  img2 = pendingCards.media.other.img2;
  img3 = pendingCards.media.other.img3;
  img4 = pendingCards.media.other.img4;
  img5 = pendingCards.media.other.img5;
  img6 = pendingCards.media.other.img6;

  this.cardForm = new FormGroup({
  'title': new FormControl(cardTitle),
  'media': new FormGroup({
    'featured': new FormControl(featured, Validators.maxLength(300)),
    'other': new FormGroup({
      'img1': new FormControl(img1, Validators.maxLength(300)),
      'img2': new FormControl(img2, Validators.maxLength(300)),
      'img3': new FormControl(img3, Validators.maxLength(300)),
      'img4': new FormControl(img4, Validators.maxLength(300)),
      'img5': new FormControl(img5, Validators.maxLength(300)),
      'img6': new FormControl(img6, Validators.maxLength(300)),
    }),
  }),

    private storeCardUrl = 'httpURL';

 onSubmit(value: string){
  let formData:Card = this.cardForm.value;
  // let formData: Card[] = this.cardForm.value;
  let body = JSON.stringify(formData);
  let headers = new Headers({'Content-Type': 'application/json'});
  return this.http.post(this.storeCardUrl, body, {headers: headers})
    .map((response: Response) =>  response.json())
    .subscribe(data => console.log(data))
    // console.log(formData);
 }

处理图像渲染和编辑的form.html部分如下所示：

 <div formGroupName="media">
  <div class="row">
    <div class="col-xs-12">
      <div class="form-group">
      <md-input-container class="mdcontainer">
        <input
          mdInput placeholder="Card Primary Image"
          type="text"
          id="featured"
          formControlName="featured"
          class="form-control"
          #featured>
      </md-input-container>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <img [src]="featured.value" class="img-responsive">
    </div>
  </div>
<!-- Secondary Images  -->
<div formGroupName="other">
  <div class="row">
    <div class="col-xs-12">
      <div class="form-group">
      <md-input-container class="mdcontainer">
        <input
          mdInput placeholder="Secondary Image 1"
          type="text"
          id="img1"
          formControlName="img1"
          class="form-control"
          #img1>
      </md-input-container>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <img [src]="img1.value" class="img-responsive">
    </div>
  </div>

我不理解的是将Media作为一个数组处理，仍然可以将其拉入我的form.html并能够显示我想要的图像。旧模型允许调用img1 / img2 / etc.但是作为数组的新模型在包含Url和其他字段的对象之外没有任何对象。我知道我可以创建一个formArray，使用formGroup和一些formControl来获得正确的结构但是能够在html上正确地获取这些图像给我带来了麻烦。

非常感谢任何帮助/建议/提示。