На основе этого вопроса в стеке, мне нужно связать раскрывающийся список для каждой строки, созданной из угловой таблицы материалов 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>
{{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: Родитель
пт: 2
hhead: нет
iid: 57073
lar: xyz
мс: женат
sts: Активный
Вот мой stackblitz.
Как сгенерировать контроль формы в каждой строке источника данных в таблице углового материала 6?