angular2-数据未以嵌套形式显示

首先,我已经阅读了许多stackoverflow关于嵌套表单的答案,但我无法解决这些问题,谢谢您的时间。

我试图制作一个表单来编辑用户信息,我使用的信息是这样的:

(2) [Object, Object]
  0: Object
    mail: "example1@exp.exp"
  1: Object
    mail: "example2@exp.exp"

在我的组件中,我创建了一个嵌套表单:

// blablabla.component.ts

// imports, component, ...

export class EditMailsComponent implements OnInit {
  @Input() data: Array<any>;

  private form: FormGroup;

  constructor(
    private formBuilder: FormBuilder
  )

  ngOnInit(){
    this.form = this.formBuilder.group({
      mails: this.formBuilder.array([]),
    });

    this.fnOpen();
  }

  private fnOpen()
  {
    // ...

    const control = <FormArray>this.form.controls['mails'];

    this.data.forEach(x => {
      control.push(this.populateForm(x);
    });

    // ...
  }

  private populateForm(x: Array<any>)
  {
    return this.formBuilder.group({
      mail: [x.mail]
    });
  }
}

我的html文件如下所示:

<!-- ... -->
<form class='smart-form' novalidate>
  <div class='modal-body'>
    <div [formGroup]='form'>
      <div formArrayName='mails'>
        <div *ngFor='let mail of form.controls.mails.controls; let i=index'>
          <div [formGroupName]="i">
            <fieldset>
              <section class='col-col-6'>
                <label class='input' id='mail'>
                  <input type='text' formControlName='mail' ngModel>
                </label>
              </section>
            </fieldset>
      <!-- ... --> 

当我试图打开要编辑的页面时,会创建正确数量的嵌套表单(例如:如果我有4个对象数组,则会打开4个表单),但“邮件”不会显示在中。

如果你需要更多的信息,我很乐意帮助你。

我以前去过的地方问:

1. 堆栈溢出- Angular 2 Form “Cannot find control with path”
2. Angular 2 Form “Cannot Find Control”
3. 堆栈溢出- Cannot find control with path: angular2
4. Angular 2 Accessing Nested FormArrays using FormBuilder

教程(我试图使用它们来查找代码中的错误):

1. How to Build Nested Model-driven Forms in Angular 2
2. Angular2: Building nested, reactive forms