Angular 2 - 使用动态嵌套表单编辑数据

Question

我正在使用嵌套表格为每个患者数据输入无限的近亲记录。工作嵌套表单：

当用户想要编辑患者的记录时，我希望使用相同的表格来编辑数据。但是，当我这样做时，除了嵌套部分（表单数组部分）之外，所有其他表单字段都被填充，只有在单击编辑时才会选择第一个项目：

我相信的挑战是，当使用新表单时，我可以使用添加按钮打开多个亲属子表单，该按钮调用(click) = "addKin()"，允许在单击时打开新的NextKin。

添加点击功能：

addKin() {
    const control = <FormArray>this.patientForm.controls['nextKins'];
    control.push(this.initNextKin());
  }

NextKin表单数组位于单独的组件中：<next-kin></next-kin>

<div class="row">
  <h5>Next of Kin Details</h5>
    <div>
      <div>
        <div formArrayName="nextKins">
           <div *ngFor="let nextKin of patientForm.controls.nextKins.controls; let i=index">
           <!-- header, show remove button when more than one kin detail is available -->
              <div>
                 Next of Kin {{i + 1}}
                 <span class="float-xs-right" *ngIf="patientForm.controls.nextKins.controls.length > 1" (click)="removeKin(i)"><i class="fa fa-times" aria-hidden="true"></i>Remove</span>
                    </div>

                    <div [formGroupName]="i">
                      <next-kin [group]="patientForm.controls.nextKins.controls[i]" ></next-kin>
                    </div>

                  </div>
                </div>
              </div>
              <button type="button" (click)="addKin()">
                Add another next of kin
              </button>
            </div>
          </div> 

在选择要编辑的记录时，如何打开新的NextKin子窗体？我已经尝试循环输入数据但只获得要显示的第一个nextKin记录（nextKins数组中的索引0）。

患者形式组件的一部分

configureForm(patient?: Patient) {
    if (patient) {
      this.currentPatient = new Patient(
        patient.$key,
        patient.registrationNo,
        patient.patientName,
        patient.gender,
        patient.birthYear,
        patient.notes,
        patient.nextKins,
        patient.createdBy,
        patient.createdDate,
        patient.updatedBy,
        patient.updatedDate
      );
    }
    this.patientForm = this._formBuilder.group({
      registrationNo: [this.currentPatient.registrationNo, [Validators.required]],
      patientName: [this.currentPatient.patientName, [Validators.required]],
      gender: [this.currentPatient.gender],
      birthYear: [this.currentPatient.birthYear, [Validators.required]],
      notes: [this.currentPatient.notes],
      nextKins: this._formBuilder.array([
        this.initNextKin(this.currentPatient.nextKins),
      ])
    });
  }

  initNextKin(patient?) {
    if (patient) {
      for (let i = 0; i < patient.length; i++) {
        return this._formBuilder.group({
          kinName: [this.currentPatient.nextKins[i]['kinName']],
          kinRelationship: [this.currentPatient.nextKins[i]['kinRelationship']],
          kinMobile: [this.currentPatient.nextKins[i]['kinMobile']],
          kinEmail: [this.currentPatient.nextKins[i]['kinEmail']]
        });
      }
    }
    return this._formBuilder.group({
      kinName: [this.currentPatient.nextKins['kinName']],
      kinRelationship: [this.currentPatient.nextKins['kinRelationship']],
      kinMobile: [this.currentPatient.nextKins['kinMobile']],
      kinEmail: [this.currentPatient.nextKins['kinEmail']]
    });
  }

  addKin() {
    const control = <FormArray>this.patientForm.controls['nextKins'];
    control.push(this.initNextKin());
  }