如何在 Angular 8 中使用反应形式将数据与单独的 headers 绑定

Question

您好，我正在使用 Angular8 响应式表单。在此，我需要根据输出中给出的数组名称绑定数据。最初我得到的所有响应都是 objects 的一个数组，但现在，它已经与 headers 不同，所以我需要相应地绑定数据。

我附上了包含所有必要编码的演示。

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
  class="table-responsive mb-3"
  [formGroup]="opportunitiesForm"
  [ngClass]="{ scroll: opportunityList?.length > 3 }"
  id="panel1"
  *ngIf="opportunitiesForm"
>
  <table class="table table-hover accordion-table" id="searchList">
    <thead>
      <tr>
        <th class="width25" scope="col">&nbsp;</th>
        <th
          scope="col"
          *ngFor="let field of opportunityListDetails"
          class="{{ field.class }}"
        >
          {{ 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 class="width25">
          <span *ngIf="opportunitesx.controls[i]['controls'].competitorId.value"
            ><i
              (mouseenter)="onOpenCompetitorDetails(item)"
              id="competitorInfo"
              class="fa fa-info-circle info-font-size"
            ></i
          ></span>
        </td>
        <td class="width250">
          <select
            class="custom-select drop"
            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
            "
            class="invalid-feedback"
          >
            <div
              *ngIf="
                opportunitesx.controls[i]['controls'].competitorId.errors
                  .required
              "
            >
              Competitor is required
            </div>
          </div>
        </td>
        <td>
          <input
            type="text"
            class="form-control"
            placeholder="Quote Count"
            formControlName="quoteCount"
            maxlength="4"
          />
        </td>
        <td>
          <input
            type="text"
            class="form-control"
            placeholder="Policy Count"
            formControlName="policyCount"
            allowNumberOnly
            maxlength="4"
          />
        </td>
        <td class="width165">
          <input
            type="text"
            class="form-control"
            placeholder="Written Premium"
            formControlName="writtenPremium"
          />
        </td>
        <td>
          <input
            type="checkbox"
            style="width: auto;"
            formControlName="isTrack"
          />
        </td>
        <td class="width125">
          <button
            class="btn btn-outline-primary btn-table"
            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
            class="btn btn-outline-primary btn-table ml-1"
            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
            class="btn btn-outline-primary btn-table ml-1"
            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
            class="btn btn-outline-primary btn-table ml-1"
            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]

DEMO

Answer 1

您正在遍历错误的变量，opportunityList 不是数组，您需要获取嵌套键并对其进行循环。要显示 header 名称，您可以在 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){
}

Link 到 Demo

PS: 我已经更新了 link 演示。要显示 header，您必须删除 table。对于 edit/new 功能，您可以进行类似的更改。

如何在 Angular 8 中使用反应形式将数据与单独的 headers 绑定

How to bind the data with seperate headers using reactive forms in Angular8

angular

angular-reactive-forms