如何动态绑定表单数组对象

时间:2018-12-02 03:36:57

标签: angular angular2-forms formgroups

我有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':'一些共享值',                                         'refVal':'some ref val'}

我如何基于帐号用唯一性对象动态填充此数组,并动态绑定shareval和refVal?有想法吗?完全迷失了。预先感谢

1 个答案:

答案 0 :(得分:0)

  

一个帐户最多可以有4个选项。如果有另一个帐户,那么该帐户将拥有自己的选项集

要实现这一目标,我认为您可能必须更改对象的第二个数组

#include <iostream>
#include <cmath>

using namespace std;

class ComplexNumber
{
public:
    double re;
    double im;
    ComplexNumber(double real = 0, double imag = 0) : re { real }, im { imag }
    {
    }
};

ComplexNumber inversion(const ComplexNumber& com)
{
    ComplexNumber temp;
    temp.re = com.re / sqrt(com.re * com.re + com.im * com.im);
    temp.im = -com.im / sqrt(com.re * com.re + com.im * com.im);
    return temp;
}

ComplexNumber operator*(const ComplexNumber& com1, const ComplexNumber& com2)
{
    return ComplexNumber(com1.re * com2.re - com1.im * com2.im,
                         com1.re * com2.im + com1.im * com2.re);
}

ComplexNumber operator/(const ComplexNumber& com1, const ComplexNumber& com2)
{
    return com1 * inversion(com2); // operator * already makes a new ComplexNumber. No 
                                   // need to make another
}

int main()
{
    ComplexNumber com1(3, 7);
    ComplexNumber com2(4, 2);
    ComplexNumber com3 = com1 / com2;
}

然后,您可以遍历这两个数组,并基于“ accountName”创建新数组。我认为这里的问题是您在这两个数组之间没有链接来组合。