Angular 7 и Angular Material table с ошибкой источника данных при генерации элемента управления формы выпадающего списка для каждой строки

Question

Исходя из этого вопроса в стеке, мне нужно связать раскрывающийся список для каждой строки, сгенерированной из угловой таблицы материалов dataSource.Раскрывающийся список должен автоматически выбирать соответствующее значение, как и другие значения.

Это таблица:

<form [formGroup]="formGroup">
    <table mat-table [dataSource]="dataSource" matSort>


      <!-- <ng-container matColumnDef="ind_id">
        <th mat-header-cell *matHeaderCellDef> Ind. ID </th>
        <td mat-cell *matCellDef="let element"> {{element.iid}} </td>
      </ng-container> -->


      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let element" [matTooltip]="element.iid" matTooltipPosition="left"> <b>{{element.far}} {{element.lar}}</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.hhead}} </td>
      </ng-container>


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

Вот код машинописного текста, где я генерирую FormArray на основе этой рабочей stackblitz из вопроса, прикрепленного выше:

constructor(private fb: FormBuilder, 
    private activatedRoute: ActivatedRoute, 
    private auth: AuthApiService) {
      this.formGroup = this.fb.group({
        'fr': this.createArray()
      })
}

Теперь для каждого formControl массива мне нужно привязать данные к выпадающему списку:

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

Где frid - это value каждой выбранной опции раскрывающегося списка, а fr - это имя, отображаемое для пользователя.

У меня возникает следующая ошибка:

[ts] Свойство 'frid' не существует для типа '{}'.[2339]

Вот фрагмент возвращаемого массива:

0: {0: "xyzzz", 1: "xyz", 2: 57073, 3:2, 4: «Родитель», 5:

«Женат», 6: «Активен», 7: «Нет»,…}

0: «xyz»

1: "zyz"

2: 57073

3: 2

4: "Родитель"

5: "Женат"

6: «активный»

7: «нет»

8: 61

возраст: 61

далеко: «xyz»

fr: "Parent"

frid: 2

hhead: "no"

iid: 57073

lar: "xyz"

мс: "Женат"

sts: "Активен"

Вот мой stackblitz .

Как создать формуконтроль в каждой строке источника данных в угловом материале 6 таблицы?

Answer 1

Или вы можете просто

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

Answer 2

Вы должны передать Type MatTableDataSource.

dataSource = new MatTableDataSource<any>(); //<-- any which accept all kind of classes.

ИЛИ: рекомендованный

dataSource = new MatTableDataSource<Type>(); //<--- Type will be class or interface