Angular 7 и Reactive form Array возвращает ошибку Cannot find control with path

Question

Я получаю данные с сервера на компонент.

Эти данные содержат нечто, называемое Family Relation, имеющее несколько значений, которые можно выбрать в раскрывающемся списке, чтобы изменить исходное значение семейного отношения.

Я хочу создать массив входных данных для управления формой, используя Reactive Forms, для отображения раскрывающегося списка в каждой строке источника данных таблицы угловых материалов.

Вот рабочий стеккоторые дают вам отличное представление о проблеме.

Вот сценарии.Я заменил данные сервера на 2 примера массива (familyRelationArray и data):

Метод getFamilyRelation () получает тип отношений и отображает их.На стеке вы можете видеть, что выпадающее меню находится внизу (что не является проблемой на моем компьютере):

getFamilyRelation() {

    //This function gets data from server, but for testing purposes, I filled an array:
    this.familyRelationArray = [
      {
        id: 1,
        type: 'Father'
      },
      {
        id: 2,
        type: 'Mother'
      },
      {
        id: 3,
        type: 'Sister'
      }
    ]
  }

Метод getData() заключается в получении исходных данных и их отображениив таблице материалов, применяя результат к dataSource, имеющему тип dataSource = new MatTableDataSource<any>();:

getData() {
    //For testing purposes, I filled an array of data instead of getting data from servers
    this.data = [
      {
        name: 'xyz', head_hh: 'Yes', fr: 'Parent', frid: 2, ms: 'Married', sts: 'Active', age: '61', iid: 123
      },
      {
        name: 'yxz', head_hh: 'No', fr: 'Child', frid: 3, ms: 'Single', sts: 'Active', age: '25', iid: 221
      },
    ]
    this.showEmpty = false;
    this.dataSource = new MatTableDataSource((this.data));
    this.resultsLength = this.data.length;
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;


  }

Вот метод FormArray, который создает раскрывающийся список в каждой строке:

constructor(private fb: FormBuilder) {
    this.formGroup = this.fb.group({
      test: this.createArray()
    })
  }

createArray(): FormArray {
    return new FormArray(this.dataSource.data.map(item => new FormGroup({
      fr: new FormControl(item.frid)
    })));
  }

html-скрипт, содержащий созданный массив форм с использованием formArrayName="test" и formGroupName="i", где i - индекс созданного раскрывающегося списка:

<form [formGroup]="formGroup">
    <mat-card class="example-card">
        <mat-card-content>
            <div class="example-container mat-elevation-z8">
                <table mat-table [dataSource]="dataSource" matSort formArrayName="test">

                    <ng-container matColumnDef="name">
                        <th mat-header-cell *matHeaderCellDef> Name </th>
                        <td mat-cell *matCellDef="let element"> <b>{{element.name}}</b> </td>

          </ng-container>


          <ng-container matColumnDef="head_hh">
            <th mat-header-cell *matHeaderCellDef> Head Of HH </th>
            <td mat-cell *matCellDef="let element"> {{element.head_hh}} </td>
          </ng-container>


          <ng-container matColumnDef="fr" >
            <th mat-header-cell *matHeaderCellDef> Family Rel. </th>
            <td mat-cell *matCellDef="let element; let i = index;">
              <div [formGroupName]="i">
                <mat-form-field color="warn" appearance="outline">
                    <mat-label>Drop List</mat-label>
                    <mat-select id="family_relation" formControlName="fr" placeholder="Drop List">                 
                          <mat-option *ngFor="let familyRelation of familyRelationArray;" [value]="frid">
                        {{familyRelation.type}}
                      </mat-option>
                    </mat-select>
                  </mat-form-field>&nbsp;
                </div>
                  <i>Original Value: {{element.fr}}</i>
            </td>
          </ng-container>

          <ng-container matColumnDef="ms">
            <th mat-header-cell *matHeaderCellDef> Marital Sts. </th>
            <td mat-cell *matCellDef="let element"> {{element.ms}} </td>
          </ng-container>
          <ng-container matColumnDef="status">
            <th mat-header-cell *matHeaderCellDef> Status </th>
            <td mat-cell *matCellDef="let element"> {{element.sts}} </td>
          </ng-container>
          <ng-container matColumnDef="age">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Age </th>
            <td mat-cell *matCellDef="let element"> {{element.age}} </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
        <mat-paginator [length]="resultsLength" [pageSizeOptions]="[15, 25, 50, 100]"></mat-paginator>
      </div>
    </mat-card-content>
    <mat-card-actions>
    </mat-card-actions>
  </mat-card>
</form>

Ошибка в том, что я не могу установитьзначение каждого раскрывающегося списка должно быть равно orignal value, отображаемому под каждым раскрывающимся списком, и сообщению об ошибке на консоли:

Ошибка: ошибка: невозможно найти элемент управления с путем: 'test

Я пробовал решения этого поста в стеке, но ничего не получалось.