Угловой 7 Раскрывающийся список внутри источника данных таблицы материалов выбирает последний элемент массива

Question

У меня есть эта группа форм внутри таблицы угловых материалов с источником данных;

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

Я получаю familyRelationArray этим методом:

getFamilyRelation() {
    let status = 'Active';
    this.auth.getFamilyRelation(status).subscribe(
      (data) => {
        this.familyRelationArray = data;
      },
      (error) => {
        console.log(error);
      }
    );
  }

Для каждой строки, отображаемой вВ моей таблице материалов их семейные отношения различны.

Я отображаю данные с использованием следующего:

getData()
  {
    this.auth.getIndPerHousehold(this.hh_id).subscribe(
      (data)=>{
        if(data=="empty")
        {
          this.showEmpty = true;
        }
        else
        {
          this.showEmpty = false;
          this.dataSource = new MatTableDataSource(Object.values(data));
          this.resultsLength = Object.values(data).length;
          this.dataSource.paginator = this.paginator;
          this.dataSource.sort = this.sort;
          // this.formGroup.controls['family_relation'].setValue(Object.values(data[0]['frid']));
          Object.values(data).forEach(element => {
            //console.log(element.frid)
            this.formGroup.get('family_relation').setValue(element.frid);
          });
        }
      },
      (error)=>
      {
        console.log(error);
      }
    );
  }

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

Object.values(data).forEach(element => {
    //console.log(element.frid)
    this.formGroup.get('family_relation').setValue(element.frid);
});

В таблице отображаются обычные данные, но в раскрывающихся списках выбирается последнее импортированное значение element.frid.

Таким образом, последняя строка является дочерней,все раскрывающиеся списки выбирают child.

Обратите внимание, что frid совпадает с family_relation_id.

Как запустить цикл внутри результата подписки на источник данных, чтобы раскрывающийся список выбрал точное значение каждой строки?