演示 2
嗨，我正在使用 Angular8 反應形式。在此，我需要根據輸出中給出的陣列名稱系結資料。最初，我將所有回應作為一個物件陣列獲取，但現在，它已與標頭區別開來，因此我需要相應地系結資料。
我附上了帶有所有必要編碼的演示。
TS輸出：
public data = {
businessLineGroup: {
'Builders Risk': [
{
id: 65,
prospectCode: 99000130,
agentCode: null,
competitorId: 32,
policyTypeId: 244,
competitorName: 'w4-ALL RISKS-DIST.OF COL.-Builders Risk',
quoteCount: '5454',
policyCount: '25',
writtenPremium: '56.00',
isTrack: true,
isEdit: false,
},
],
'Commercial Monoline': [
{
id: 64,
prospectCode: 99000130,
agentCode: null,
competitorId: 31,
policyTypeId: 245,
competitorName:
'UNITED HOME INS CO-ALL RISKS-ARKANSAS-Commercial Monoline',
quoteCount: '4566',
policyCount: '24',
writtenPremium: '45.00',
isTrack: true,
isEdit: false,
},
{
id: 69,
prospectCode: 99000130,
agentCode: null,
competitorId: 37,
policyTypeId: 245,
competitorName: 'ug fixes-AMWINS-DELAWARE-Commercial Monoline',
quoteCount: '524',
policyCount: '62',
writtenPremium: '564.00',
isTrack: false,
isEdit: false,
},
],
'Commercial Package': [
{
id: 67,
prospectCode: 99000130,
agentCode: null,
competitorId: 34,
policyTypeId: 246,
competitorName:
'Nationwide Mutual Insurance Company-AMWINS-DELAWARE-Commercial Package',
quoteCount: '452',
policyCount: '52',
writtenPremium: '45.00',
isTrack: false,
isEdit: false,
},
],
},
};
系結方法：
private getOpportunitiesList() {
this.opportunityList = Object.keys(this.data.businessLineGroup);
if (this.opportunitesx && this.opportunitesx.controls) {
this.opportunitesx.controls = [];
}
let amount: any;
for (let i = 0; i < this.opportunitesx.length; i ) {
if (this.opportunityList[i].quoteCount) {
let a = new Intl.NumberFormat().format(
this.opportunityList[i].quoteCount
);
this.opportunityList[i].quoteCount = a;
}
this.opportunityList[i].isEdit = false;
}
for (let lang of this.opportunityList) {
let group = this.createOpportunityInformation();
group.get('competitorId').setValue(lang.competitorId);
group.get('competitorId').disable();
group.get('quoteCount').setValue(lang.quoteCount);
group.get('quoteCount').disable();
group.get('policyCount').setValue(lang.policyCount);
group.get('policyCount').disable();
group.get('writtenPremium').setValue(lang.writtenPremium);
group.get('writtenPremium').disable();
group.get('isTrack').setValue(lang.isTrack);
group.get('isEdit').setValue(false);
group.get('isTrack').disable();
group.get('id').setValue(lang.id);
group.get('id').disable();
this.opportunitesx.push(group);
}
this.preventOpportunityEmpty();
}
HTML：
<div
[formGroup]="opportunitiesForm"
[ngClass]="{ scroll: opportunityList?.length > 3 }"
id="panel1"
*ngIf="opportunitiesForm"
>
<table id="searchList">
<thead>
<tr>
<th scope="col"> </th>
<th
scope="col"
*ngFor="let field of opportunityListDetails"
>
{{ field.displayName }}
</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody formArrayName="opportunitesx">
<tr
*ngFor="
let item of opportunitiesForm.get('opportunitesx')['controls'];
let i = index
"
[formGroupName]="i"
>
<td >
<span *ngIf="opportunitesx.controls[i]['controls'].competitorId.value"
><i
(mouseenter)="onOpenCompetitorDetails(item)"
id="competitorInfo"
></i
></span>
</td>
<td >
<select
formControlName="competitorId"
[ngClass]="{
'is-invalid':
submitted &&
opportunitesx.controls[i]['controls'].competitorId.errors
}"
id="competitorId"
>
<option disabled="" value="">Choose Competitor</option>
<option
*ngFor="let competitor of competitorDropdown"
[value]="competitor.id"
title="competitor.value"
>
{{ competitor.value }}
</option>
</select>
<div
*ngIf="
submitted &&
opportunitesx.controls[i]['controls'].competitorId.errors
"
>
<div
*ngIf="
opportunitesx.controls[i]['controls'].competitorId.errors
.required
"
>
Competitor is required
</div>
</div>
</td>
<td>
<input
type="text"
placeholder="Quote Count"
formControlName="quoteCount"
maxlength="4"
/>
</td>
<td>
<input
type="text"
placeholder="Policy Count"
formControlName="policyCount"
allowNumberOnly
maxlength="4"
/>
</td>
<td >
<input
type="text"
placeholder="Written Premium"
formControlName="writtenPremium"
/>
</td>
<td>
<input
type="checkbox"
style="width: auto;"
formControlName="isTrack"
/>
</td>
<td >
<button
title="Close"
(click)="clearOpportunity(i, opportunitesx.controls[i]['controls'])"
*ngIf="
opportunitesx.controls[i]['controls'].isEdit.value ||
opportunitesx.controls[i]['controls'].id.value == 0
"
>
Close
</button>
<button
title="Edit"
(click)="
editOpportunityDetails(i, opportunitesx.controls[i]['controls'])
"
*ngIf="
!opportunitesx.controls[i]['controls'].isEdit.value &&
opportunitesx.controls[i]['controls'].id.value > 0
"
>
Edit
</button>
<button
title="Save"
type="button"
*ngIf="
opportunitesx.controls[i]['controls'].isEdit.value ||
opportunitesx.controls[i]['controls'].id.value == 0
"
[disabled]="!this.opportunitesx.controls[i].dirty"
(click)="saveOpportunityDetails(i)"
>
Save
</button>
<button
title="Delete"
*ngIf="opportunitesx.controls[i]['controls'].id.value > 0"
[disabled]="
opportunitesx.controls[i]['controls'].isEdit.value &&
opportunitesx.controls[i]['controls'].id.value > 0
"
type="button"
(click)="
deleteOpportunityDetails(i, opportunitesx.controls[i]['controls'])
"
>
Delete
</button>
</td>
</tr>
</tbody>
</table>
[![圖片][2]][2]
演示
uj5u.com熱心網友回復：
您正在迭代錯誤的變數，opportunityList不是陣列，您需要獲取嵌套的鍵并對其進行回圈。要顯示標題名稱，您可以在您的formGroup和設定值中添加兩個控制元件，如下所示：
const dataArray = [];
let obj: any = {};
Object.keys(this.opportunityList.businessLineGroup).forEach((item,index) => {
this.opportunityList.businessLineGroup[item].forEach((subItem,subIndex) => {
obj = subItem;
obj.header = item;
if(subIndex == 0){
obj.showHeader = true;
}else {
obj.showHeader = false;
}
dataArray.push(obj);
});
});
遍歷此陣列以生成表單控制元件。
for (let lang of dataArray){
}
演示鏈接
PS：我已經更新了演示鏈接。要顯示標題，您必須洗掉表格。對于您的編輯/新功能，您可以進行類似的更改。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/334778.html
上一篇：AngularReactive表單驗證和資料形成問題
下一篇：錯誤型別錯誤：無法讀取SafeSubscriber.settingsService.create.subscribe.loading[as_next]處未定義的屬性“重置”