我有2个数组,
AccountArray = [{'accountName': 1}, {'accountName': 2}, {'accountName': 3}];
optionArray = [{'optNumber': 1,'optDesc': 'Appi'}, {'optNumber': 2,'optDesc': 'Appimon'}, {'optNumber': 3,'optDesc': 'Appimol'}, {'optNumber': 4,'optDesc': 'Appivali'}];
我有一个如下表格:
initForm() {
this.optionForm = this._fb.group({
'options': this._fb.array([]),
});
this.createOptionArray();
}
createOptionArray() {
let optionArray: Array<any> = [];
const optionsControl = <FormArray>this.optionForm.controls['options'];
console.log(this.selectedEvntAccList, 'test');
this.selectedEvntAccList.map((account, index)=> {
account.options.map((option, optInd)=> {
// return {'accountNumber': account.accountNumber, 'optionNumber': option.optNumber};
optionArray[optInd] = {'accountNumber': account.accountNumber,
'optNumber': option.optNumber,
'optDesc': option.optDesc,
'shareVal': '',
'refVal': ''};
});
});
console.log(optionArray, 'option Array');
optionArray.map(obj => {
optionsControl.push(new FormControl(obj));
});
console.log(this.optionForm.controls['options'], 'optionsControl');
}
模板:
<div class="row" *ngIf="optionForm" [formGroup]="optionForm">
<!-- <div class="row u-nomargin" *ngFor="let option of optionForm.controls['options']?.value; let i = index"> -->
<div class="row u-nomargin" *ngFor="let option of optionForm.controls['options']?.controls; let i = index">
<div class="row bottom-small">
<div class="col-4 u-border-right-dotted option-height">
<h3>{{'corporate_action.view.eventOptions.seqHeader1' | translate}} {{option?.value?.optNumber}} -
{{option?.value?.optDesc}}</h3>
<div class="row action-view-options">
<label class="btn btn-dbs-link accordian u-margin-top-16 u-nopadding" (click)="hideShowDetails(option)">
<span *ngIf="option.__hide__">{{'respondcae.form.show_option' | translate}}</span>
<span *ngIf="!option.__hide__">{{'respondcae.form.hide_option' | translate}}</span>
<label class="icon icon-expand" [ngClass]="{'collapse': !option.__hide__}"></label>
</label>
</div>
</div>
<div class="col-8">
<div class="row">
<div class="col-5 display-value">
{{'respondcae.form.noOfShares' | translate}}
<br>
<my-input [type]="'tel'" [formControl]="ShareValue">
</my-input>
</div>
<div class="col-7 display-value">
{{'respondcae.form.your_reference' | translate}}
<br>
<my-input [type]="'text'" [formControl]="ShareValue"
[maxlength] = '15'></my-input>
</div>
</div>
</div>
</div>
</div>
</div>
我想要实现的是我需要创建一组帐户选项对。一个帐户最多可以有 4 个选项。如果有另一个帐户,则该帐户将有自己的一组选项。
所以数据结构应该是这样的:
{'accountNumber': uniqueAccountNumber, 'optNumber': optionNumber, 'optDesc': option.optDesc, 'shareVal': 'some share val', 'refVal': 'some ref val'}
如何使用基于帐号的唯一对象动态填充此数组并动态绑定 shareval 和 refVal?有什么想法吗?我完全迷路了。提前致谢