javascript - 在以角度形式显示之前检查记录是否存在
问题描述
我需要在 Angular 屏幕上显示未知数字记录中的 4 条记录。在我使用的示例数据中，有 53 条记录，因此如果我只使用示例数据，则在加载数据时不需要存在数据。但是，在现实世界中，可能会返回 0 条记录。
我想出了一种可能做到这一点的方法，但我想出的方法感觉像是一种蛮力方法，而不是优雅和现代的方法。我想出的相关代码如下所示。
.ts 文件的片段
constructor(
private repoService: UserApiService,
public dialogRef: MatDialogRef<OrphansComponent>,
public dialog: MatDialog,
@Inject(MAT_DIALOG_DATA) public data: any
) {
const fb = new FormBuilder;
this.orphanForm = fb.group({
naPartNo: null,
altPartNo: null,
partNo: null,
rev: null,
partStatusId: null,
serialNo: null,
lotNo: null,
asBuiltQty: null,
fltCrit: null,
comments: null
})
this.orphanForm1 = fb.group({
naPartNo1: null,
altPartNo1: null,
partNo1: null,
rev1: null,
partStatusId1: null,
serialNo1: null,
lotNo1: null,
asBuiltQty1: null,
fltCrit1: null,
comments1: null,
})
}
setData(){
if(this.dataSource.data[0].fltCrit == 'Y'){
this.dataSource.data[0].fltCrit = true;
} else {
this.dataSource.data[0].fltCrit = false;
}
const fb = new FormBuilder;
if(this.dataSource.data[0] !== undefined){
console.log('Item 0 in array');
this.orphanForm = fb.group({
naPartNo: new FormControl({ value: this.dataSource.data[0].naPartNo, disabled: false}),
altPartNo: new FormControl({ value: this.dataSource.data[0].altPartNo, disabled: false}),
partNo: new FormControl({ value: this.dataSource.data[0].partNo, disabled: false}),
rev: new FormControl({ value: this.dataSource.data[0].asBuiltCl, disabled: false}),
partStatusId: new FormControl({ value: this.dataSource.data[0].partStatusId, disabled: false}),
serialNo: new FormControl({ value: this.dataSource.data[0].serialNo, disabled: false}),
lotNo: new FormControl({ value: this.dataSource.data[0].lotNo, disabled: false}),
asBuiltQty: new FormControl({ value: this.dataSource.data[0].asBuiltQty, disabled: false}),
fltCrit: new FormControl({ value: this.dataSource.data[0].fltCrit, disabled: false}),
comments: new FormControl({ value: this.dataSource.data[0].comments, disabled: false}),
})
};
if(this.dataSource.data[1] !== undefined){
console.log('Item 1 in array');
this.orphanForm1 = fb.group({
naPartNo1: new FormControl({ value: this.dataSource.data[1].naPartNo, disabled: false}),
altPartNo1: new FormControl({ value: this.dataSource.data[1].altPartNo, disabled: false}),
partNo1: new FormControl({ value: this.dataSource.data[1].partNo, disabled: false}),
rev1: new FormControl({ value: this.dataSource.data[1].asBuiltCl, disabled: false}),
partStatusId1: new FormControl({ value: this.dataSource.data[1].partStatusId, disabled: false}),
serialNo1: new FormControl({ value: this.dataSource.data[1].serialNo, disabled: false}),
lotNo1: new FormControl({ value: this.dataSource.data[1].lotNo, disabled: false}),
asBuiltQty1: new FormControl({ value: this.dataSource.data[1].asBuiltQty, disabled: false}),
fltCrit1: new FormControl({ value: this.dataSource.data[1].fltCrit, disabled: false}),
comments1: new FormControl({ value: this.dataSource.data[1].comments, disabled: false}),
})
};
}
.html 文件的片段
<div [formGroup]="orphanForm">
<fieldset class="grid-item">
<table>
<tr>
<td class="dataLabel" style="width: 80px;">
</td>
<td class="dataLabel" style="width: 160px;" colspan="2">
NA Part No
</td>
<td class="dataLabel" style="width: 160px;" colspan="2">
Alt Part No
</td>
<td class="dataLabel" style="width: 160px;" colspan="2">
Part No
</td>
<td class="dataLabel" style="width: 80px;">
Rev
</td>
<td class="dataLabel" style="width: 80px;">
Status
</td>
</tr>
<tr>
<td style="width: 80px;">
</td>
<td style="width: 160px;" colspan="2">
<mat-form-field appearance="fill" style="width: 150px;">
<input matInput type="text" formControlName="naPartNo"/>
</mat-form-field>
</td>
<td style="width: 160px;" colspan="2">
<mat-form-field appearance="fill" style="width: 150px;">
<input matInput type="text" formControlName="altPartNo"/>
</mat-form-field>
</td>
<td style="width: 160px;" colspan="2">
<mat-form-field appearance="fill" style="width: 150px;">
<input matInput type="text" formControlName="partNo"/>
</mat-form-field>
</td>
<td style="width: 80px;">
<mat-form-field appearance="fill" style="width: 75px;">
<input matInput type="text" formControlName="rev"/>
</mat-form-field>
</td>
<td style="width: 80px;">
<mat-form-field appearance="fill" style="width: 75px;">
<input matInput type="text" formControlName="partStatusId"/>
</mat-form-field>
</td>
</tr>
<tr>
<td class="dataLabel" style="width: 80px;">
Serial No
</td>
<td style="width: 80px;">
<mat-form-field appearance="fill" style="width: 75px;">
<input matInput type="text" formControlName="serialNo"/>
</mat-form-field>
</td>
<td class="dataLabel" style="width: 80px;">
Lot No
</td>
<td style="width: 80px;">
<mat-form-field appearance="fill" style="width: 75px;">
<input matInput type="text" formControlName="lotNo"/>
</mat-form-field>
</td>
<td class="dataLabel" style="width: 80px;">
Qty
</td>
<td style="width: 80px;">
<mat-form-field appearance="fill" style="width: 75px;">
<input matInput type="text" formControlName="asBuiltQty"/>
</mat-form-field>
</td>
<td style="width: 80px;">
</td>
<td style="width: 160px;" colspan="2">
<mat-checkbox formControlName="fltCrit" labelPosition="before" class="dataLabel">Flight Critical</mat-checkbox>
</td>
</tr>
<tr>
<td class="dataLabel" style="width: 80px;">
Comments
</td>
<td style="width: 640px;" colspan="8">
<mat-form-field appearance="fill" style="width: 630px;">
<input matInput type="text" formControlName="comments"/>
</mat-form-field>
</td>
</tr>
</table>
</fieldset>
</div>
<div [formGroup]="orphanForm1">
<fieldset class="grid-item">
<table>
<tr>
<td class="dataLabel" style="width: 80px;">
</td>
<td class="dataLabel" style="width: 160px;" colspan="2">
NA Part No
</td>
<td class="dataLabel" style="width: 160px;" colspan="2">
Alt Part No
</td>
<td class="dataLabel" style="width: 160px;" colspan="2">
Part No
</td>
<td class="dataLabel" style="width: 80px;">
Rev
</td>
<td class="dataLabel" style="width: 80px;">
Status
</td>
</tr>
<tr>
<td style="width: 80px;">
</td>
<td style="width: 160px;" colspan="2">
<mat-form-field appearance="fill" style="width: 150px;">
<input matInput type="text" formControlName="naPartNo1"/>
</mat-form-field>
</td>
<td style="width: 160px;" colspan="2">
<mat-form-field appearance="fill" style="width: 150px;">
<input matInput type="text" formControlName="altPartNo1"/>
</mat-form-field>
</td>
<td style="width: 160px;" colspan="2">
<mat-form-field appearance="fill" style="width: 150px;">
<input matInput type="text" formControlName="partNo1"/>
</mat-form-field>
</td>
<td style="width: 80px;">
<mat-form-field appearance="fill" style="width: 75px;">
<input matInput type="text" formControlName="rev1"/>
</mat-form-field>
</td>
<td style="width: 80px;">
<mat-form-field appearance="fill" style="width: 75px;">
<input matInput type="text" formControlName="partStatusId1"/>
</mat-form-field>
</td>
</tr>
<tr>
<td class="dataLabel" style="width: 80px;">
Serial No
</td>
<td style="width: 80px;">
<mat-form-field appearance="fill" style="width: 75px;">
<input matInput type="text" formControlName="serialNo1"/>
</mat-form-field>
</td>
<td class="dataLabel" style="width: 80px;">
Lot No
</td>
<td style="width: 80px;">
<mat-form-field appearance="fill" style="width: 75px;">
<input matInput type="text" formControlName="lotNo1"/>
</mat-form-field>
</td>
<td class="dataLabel" style="width: 80px;">
Qty
</td>
<td style="width: 80px;">
<mat-form-field appearance="fill" style="width: 75px;">
<input matInput type="text" formControlName="asBuiltQty1"/>
</mat-form-field>
</td>
<td style="width: 80px;">
</td>
<td style="width: 160px;" colspan="2">
<mat-checkbox formControlName="fltCrit1" labelPosition="before" class="dataLabel">Flight Critical</mat-checkbox>
</td>
</tr>
<tr>
<td class="dataLabel" style="width: 80px;">
Comments
</td>
<td style="width: 640px;" colspan="8">
<mat-form-field appearance="fill" style="width: 630px;">
<input matInput type="text" formControlName="comments1"/>
</mat-form-field>
</td>
</tr>
</table>
</fieldset>
</div>
我猜必须有更好的方法来做到这一点（即单个表单而不是多个表单）但是当我尝试将 if 语句放入表单组时，我开始遇到编译错误。当我试图只有一个表单时，只填充了最后一个详细信息组。
我希望有人可以提出更好的方法来做到这一点。
解决方案
您需要一个具有将数据作为输入并返回 FormArray 的方法的服务。FormGroup 用于固定数量的行，并且不是很优雅。 这里是 Formarray 的文档。 这里是关于动态表单和如何创建服务的文档
推荐阅读
- laravel - 在使用工厂插入每个模型后添加 5 分钟的时间戳
- python - 无法在 Firefox 上使用 Selenium 打开新标签页
- python - 时间限制修复和随机化
- elasticsearch - 弹性搜索 - 多个更新索引的最佳方式？
- javascript - 如何仅在某些媒体查询上运行 javascript 文件？
- elasticsearch - Elastic Search 合并两个索引
- php - 将动态数据添加到 json 文字字符串
- java - 使Java方法不可中断的用例是什么
- python - 如何使用包含文本文件的文件夹返回字典？
- javascript - chart.js 折线图和点之间的“正确”间距？（即基于宽度百分比的水平位置，不固定）