angular - 材料表数据源内的Angular 7下拉列表正在选择数组的最后一项
问题描述
我在具有数据源的角度材料表中有这个表单组;
<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>
{{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 相同。
如何在数据源订阅结果中运行循环以让下拉列表选择每一行的确切值?
解决方案
推荐阅读
- python - 正则表达式在 Python 中的日期之后提取字符串
- android-studio - Android Studio 图标未显示在任务栏中 - Windows 11
- python - 如何将具有单个 csv 列的 pandas 数据框插入 MySQL 数据库
- macos - 将自制软件从 M1 迁移回英特尔
- allure - 当我在 Jenkins 中使用行为 + 诱惑时如何查看执行日志?
- javascript - 使用 React 自动填充 SPFX 搜索的文本框
- unit-testing - 如何在 git pre-commit 钩子中集成 tcltest 测试套件
- django - 使用 Chart.js 3.6 版本时,图表未显示在 django 应用程序中
- android - 无法从 Android Studio 编辑或查看代码
- go - 去 redis HMSet 失败