Angular 8 和表单数组错误找不到路径控制：索引

Question

我在mat-table 中显示一个表单数组：

    <mat-table #table [dataSource]="dataSource" class="example-table"
        *ngIf="dataSource">
        <ng-container matColumnDef="invoice_id">
            <mat-header-cell *matHeaderCellDef>Invoice#</mat-header-cell>
            <mat-cell *matCellDef="let row">{{ row.invoice_id }}</mat-cell>
        </ng-container>

        <ng-container matColumnDef="update_status">

           <mat-header-cell *matHeaderCellDef>Update Status</mat-header-cell>

           <!-- <mat-cell *matCellDef="let row">{{ row.date_modified }}</mat-cell> -->

           <mat-cell *matCellDef="let row; let i = index;"
              formArrayName="status_array">
              <div [formGroupName]="i">
            <mat-form-field>
                <mat-label>Status</mat-label>
                <mat-select id="receipt_status"
                    formControlName="receipt_status" placeholder="Status">
                    <mat-option (click)="onChange(row, i, 'ms', status.id)"
                        *ngFor="let status of ReceiptStatus;"
                        [value]="status.id">
                        {{status.name}}
                    </mat-option>
                </mat-select>
            </mat-form-field>&nbsp;
        </div>
    </mat-cell>

</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

<mat-paginator #paginator [length]="length" [pageSize]="pageSize"
        [showFirstLastButtons]="true" [hidePageSize]="true"
        (page)="loadData($event)" *ngIf="dataSource && length > 0">
    </mat-paginator>
</div>

在.ts 脚本处：

在 ngOnInit 内部：

ngOnInit{

this.createStatusArray();

}

createStatusArray(){
    this.statusArrayForm = this.fb.group({
      'status_array': this.createArray()
    })

  }

  createArray(): FormArray {
    return new FormArray(this.dataSource.data.map(item => new FormGroup({
      receipt_status: new FormControl(item['is_active']),
    })));

  }

dataSource 是通过 api 调用设置的：

if(response && response.status == "success"){
        this.receiptMsg = false;

        this.receiptsArray = response.response;
        this.length = this.receiptsArray.length;
        this.dataSource = response.response;
        // console.log(this.dataSource)
          setTimeout(() => {
            this.dataSource.paginator = this.paginator;
          }, 50);

*ngFor中添加的状态：

ReceiptStatus = [
    {id: 0, name: 'Inactive'},
    {id: 1, name: 'Active'}
  ];

我不断收到以下错误：

错误错误：找不到带有路径的控件：'status_array -> 1'

Answer 1

你需要在获取数据时创建formArray，而不是在ngOnInit中，而且mat-table的dataSource最好是formArray

  if(response && response.status == "success"){
        this.receiptMsg = false;
        this.receiptsArray = response.response;
        this.length = this.receiptsArray.length;
        this.dataAuxiliar=response.response; //<--use an array to store the data
        this.formArray = this.createArray(response.response);
          setTimeout(() => {
            this.dataSource.paginator = this.paginator;
          }); //is innecesary give a "time", If we make a setTimeout, angular 
              //make the instruction in a "second-round"

  //to createArray pass the data
   createArray(data:any[]): FormArray {
    return new FormArray(data.map(item => new FormGroup({
      receipt_status: new FormControl(item['is_active']),
    })));

以后可以做

  <!--see that the dataSource is formArray.controls-->
  <!--it's not necesary that the formArray "belong" to a formGroup-->
  <!--if belong to a formGroup be sure that you has a getter like

     get formArray(){
       return this.form?this.form.get('myFormArray') as FormArray:null
     }
  -->
  <mat-table #table *ngIf="formArray" 
        [dataSource]="formArray.controls" class="example-table">
        <--for an element of dataAuxiliar use let i=index and
            dataAuxiliar[i].propertieOfThe data, e.g. -->
        <ng-container matColumnDef="invoice_id">
            <mat-header-cell *matHeaderCellDef>Invoice#</mat-header-cell>
            <mat-cell *matCellDef="let row;let i=index">{{ dataAuxiliar[i].invoice_id }}</mat-cell>
        </ng-container>

       <--for a control of the FormArray use 
              [formControl]=element.get('field of the formGroup')-->
        <ng-container matColumnDef="update_status">
           <th mat-header-cell *matHeaderCellDef> Status</th>
           <td mat-cell *matCellDef="let element">
               <input [formControl]="element.get('receipt_status')">
           </td>
         </ng-container>

可以在this SO question 中建立一个 mat-table 中的 formArray 示例