Angular 是否可以将反应式表单数组控件绑定到ngx数据表？

我的表单数组html标记工作正常， （缩短的快照）

---

是的，这是可能的。。以下是工作示例：

<div formGroup="partnersForm"><div formArrayName="partners">
   <ngx-datatable #mydatatable class="material" [headerHeight]="50"     [limit]="5" [columnMode]="'force'" [footerHeight]="50" [rowHeight]="'auto'"
   [rows]="this.patientRestrationForm.get('partners').value">
       <ngx-datatable-column name="recordId">
          <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">
             <span title="Double click to edit" (dblclick)="editing[rowIndex + '-name'] = true" *ngIf="!editing[rowIndex + '-name']">
                 {{value}}
             </span>
             <div *ngIf="editing[rowIndex+ '-name']" [formGroupName]="rowIndex">
                 <input [formControlName]="'recordId'" autofocus   type="text" />
             </div>
      </ng-template>
       </ngx-datatable-column>
       <ngx-datatable-column name="patientFileId">
          <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row" style="margin-top: 10px;">
             <span title="Double click to edit" (dblclick)="editing[rowIndex + '-name'] = true" *ngIf="!editing[rowIndex + '-name']">
                 {{value}}
             </span>
             <div *ngIf="editing[rowIndex+ '-name']" [formGroupName]="rowIndex">
              <input [formControlName]="'patientFileId'" autofocus type="text" />
             </div>
          </ng-template>
       </ngx-datatable-column>
   </ngx-datatable>
</div></div>

---

年回到这里遇到了同样的问题我是如何解决的

<form [formGroup]="editProductForm">
    <div formArrayName="productRows">
      <ngx-datatable
        #projectBulkEditTable
        [rows]="formTableRows"
        class="bootstrap fullscreen ngx-datatable"
        [loadingIndicator]="loadingIndicator"
        [columnMode]="'force'"
        [headerHeight]="50"
        [footerHeight]="50"
        [rowHeight]="70"
        [reorderable]="reorderable"
        [swapColumns]="swapColumns"
        [scrollbarV]="true"
        [scrollbarH]="true"
        [virtualization]="false"
        [selected]="selected"
      >


        <ngx-datatable-column name="Name">
          <ng-template ngx-datatable-header-template let-column="column">
            Product Name
          </ng-template>
          <ng-template
            ngx-datatable-cell-template
            let-rowIndex="rowIndex"
            let-row="row"
            let-value="value"
          >
            <ng-container
              *ngIf="row.get('isEditable').value"
              [formGroupName]="rowIndex"
            >
              <input
                type="text"
                formControlName="productName"
                class="form-control"
              />
            </ng-container>

            <ng-container *ngIf="!row.get('isEditable').value">
              {{ row.value.productName }}
            </ng-container>
          </ng-template>
        </ngx-datatable-column>




        <ngx-datatable-column name="Action">
          <ng-template ngx-datatable-header-template let-column="column">
            Action
          </ng-template>
          <ng-template
            ngx-datatable-cell-template
            let-rowIndex="rowIndex"
            let-row="row"
            let-value="value"
          >
            <ng-container [formGroupName]="rowIndex">
              <button
                class="btn btn-info btn-sm mb-5 mx-2"
                (click)="editRow(row, rowIndex)"
              >
                <span class="fas fa-edit" aria-hidden="true"></span>
              </button>

              <button
                class="btn btn-success btn-sm mb-5"
                (click)="saveRow(row, rowIndex)"
              >
                <span class="fas fa-check" aria-hidden="true"></span>
              </button>
            </ng-container>
          </ng-template>
        </ngx-datatable-column>
      </ngx-datatable>
    </div>
  </form>

---

什么是患者分层表？

<div formGroup="partnersForm"><div formArrayName="partners">
   <ngx-datatable #mydatatable class="material" [headerHeight]="50"     [limit]="5" [columnMode]="'force'" [footerHeight]="50" [rowHeight]="'auto'"
   [rows]="this.patientRestrationForm.get('partners').value">
       <ngx-datatable-column name="recordId">
          <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">
             <span title="Double click to edit" (dblclick)="editing[rowIndex + '-name'] = true" *ngIf="!editing[rowIndex + '-name']">
                 {{value}}
             </span>
             <div *ngIf="editing[rowIndex+ '-name']" [formGroupName]="rowIndex">
                 <input [formControlName]="'recordId'" autofocus   type="text" />
             </div>
      </ng-template>
       </ngx-datatable-column>
       <ngx-datatable-column name="patientFileId">
          <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row" style="margin-top: 10px;">
             <span title="Double click to edit" (dblclick)="editing[rowIndex + '-name'] = true" *ngIf="!editing[rowIndex + '-name']">
                 {{value}}
             </span>
             <div *ngIf="editing[rowIndex+ '-name']" [formGroupName]="rowIndex">
              <input [formControlName]="'patientFileId'" autofocus type="text" />
             </div>
          </ng-template>
       </ngx-datatable-column>
   </ngx-datatable>
</div></div>

createForm() {
    this.partnersForm = this.fb.group({
        partners: this.fb.array(partnersDataList)
    });

    this.subscriptions.push(
        this.partnersForm.valueChanges.subscribe(() => this.onValueChange())
    );
    this.onValueChange();
}

onValueChange() {
    // Listen for values in form fields, NO need to use change or blur events in controls
    // with --> this.partnersForm.value
}

<form [formGroup]="editProductForm">
    <div formArrayName="productRows">
      <ngx-datatable
        #projectBulkEditTable
        [rows]="formTableRows"
        class="bootstrap fullscreen ngx-datatable"
        [loadingIndicator]="loadingIndicator"
        [columnMode]="'force'"
        [headerHeight]="50"
        [footerHeight]="50"
        [rowHeight]="70"
        [reorderable]="reorderable"
        [swapColumns]="swapColumns"
        [scrollbarV]="true"
        [scrollbarH]="true"
        [virtualization]="false"
        [selected]="selected"
      >


        <ngx-datatable-column name="Name">
          <ng-template ngx-datatable-header-template let-column="column">
            Product Name
          </ng-template>
          <ng-template
            ngx-datatable-cell-template
            let-rowIndex="rowIndex"
            let-row="row"
            let-value="value"
          >
            <ng-container
              *ngIf="row.get('isEditable').value"
              [formGroupName]="rowIndex"
            >
              <input
                type="text"
                formControlName="productName"
                class="form-control"
              />
            </ng-container>

            <ng-container *ngIf="!row.get('isEditable').value">
              {{ row.value.productName }}
            </ng-container>
          </ng-template>
        </ngx-datatable-column>




        <ngx-datatable-column name="Action">
          <ng-template ngx-datatable-header-template let-column="column">
            Action
          </ng-template>
          <ng-template
            ngx-datatable-cell-template
            let-rowIndex="rowIndex"
            let-row="row"
            let-value="value"
          >
            <ng-container [formGroupName]="rowIndex">
              <button
                class="btn btn-info btn-sm mb-5 mx-2"
                (click)="editRow(row, rowIndex)"
              >
                <span class="fas fa-edit" aria-hidden="true"></span>
              </button>

              <button
                class="btn btn-success btn-sm mb-5"
                (click)="saveRow(row, rowIndex)"
              >
                <span class="fas fa-check" aria-hidden="true"></span>
              </button>
            </ng-container>
          </ng-template>
        </ngx-datatable-column>
      </ngx-datatable>
    </div>
  </form>

 this.formTableRows = (this.editProductForm.get(
            "productRows"
          ) as FormArray).controls;