为每一行生成下拉列表表单控件时,Angular 7 和 Angular Material 表带有数据源错误 [英] Angular 7 and Angular Material table with data source error when generating drop list form control for each row
问题描述
基于此问题在堆栈上,我需要为从角材料表dataSource
生成的每一行绑定一个下拉列表.下拉列表应自动选择相应的值,作为其他值.
Based on this question on stack, I need to bind a drop down list, for each row generated from angular material table dataSource
. The drop down list should select automatically the correspondent value, as other values.
这是表:
<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 来自上面附加的问题:
Here is the typescript code, where I generate a FormArray based on this working stackblitz from the question attached above:
constructor(private fb: FormBuilder,
private activatedRoute: ActivatedRoute,
private auth: AuthApiService) {
this.formGroup = this.fb.group({
'fr': this.createArray()
})
}
现在对于数组的每个formControl
,我需要将数据绑定到下拉列表:
Now for each formControl
of the array, I need to bind the data to drop list:
createArray(): FormArray{
return new FormArray(this.dataSource.data.map(item=> new FormGroup({
fr: new FormControl(item.frid)
})));
}
其中frid
为下拉列表中每个选中选项的value
,fr
为用户显示的名称.
Where frid
is the value
of each selected option of drop list, and fr
is the name displayed for user.
我遇到以下错误:
[ts] 类型{}"上不存在属性frid".[2339]
[ts] Property 'frid' does not exist on type '{}'. [2339]
这里是返回数组的片段:
Here a snippet of the returned array:
0: {0: "xyzzz", 1: "xyz", 2: 57073, 3: 2, 4: "Parent", 5:
0: {0: "xyzzz", 1: "xyz", 2: 57073, 3: 2, 4: "Parent", 5:
已婚",6:活跃",7:没有",...}
"Married", 6: "Active", 7: "no",…}
0:xyz"
1:zyz"
2:57073
3:2
4:父母"
5:已婚"
6:主动"
7:不"
8:61
年龄:61
远:xyz"
fr:父母"
弗里德:2
hhead:否"
身份证号:57073
lar:xyz"
毫秒:已婚"
sts:主动"
这是我的stackblitz.
如何在angular material 6 table的每一行数据源中生成表单控件?
How to generate form control in each row of data source in angular material 6 table ?
推荐答案
或者你可以简单地
createArray(): FormArray{
return new FormArray(this.dataSource.data.map(item=> new FormGroup({
fr: new FormControl(item['frid'])
})));
}
这篇关于为每一行生成下拉列表表单控件时,Angular 7 和 Angular Material 表带有数据源错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!