Question

我有一个带有FormArray的FormGroup和一个显示该数组的mat-table。当我向FormArray添加新的FormGroup时，mat-table不会添加新行。

我正在尝试对TrackBy进行广告投放，但是我不知道在哪里（而且老实说，为什么也不行）。

component.html：

<form [formGroup]="formGroup">
    <div formArrayName="items">
        <button mat-raised-button (click)="addNew()">New Case</button>

        <table mat-table [dataSource]="items.controls">
            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>

            <ng-container matColumnDef="itemKey">
                <mat-header-cell *matHeaderCellDef> Key </mat-header-cell>
                <mat-cell *matCellDef="let item; let i = index" [formGroupName]="i">
                    <mat-form-field> 
                        <input formControlName="itemKey" matInput />
                    </mat-form-field>
                </mat-cell>
            </ng-container>

和component.ts：

formGroup = new FormGroup({
   items: new FormArray()
});

get items() { return this.formGroup.get("items") as FormArray }


addNew() {
  this.items.push(new FormGroup({
    itemKey: new FormControl(),
    itemName: new FormControl()
  }));
}

Answer 1

由于表针对性能进行了优化，因此不会自动检查数据数组的更改。相反，当在数据数组上添加，删除或移动对象时，可以通过调用表的renderRows（）方法来触发对表的渲染行的更新。

如果提供了数据数组，则必须在数组的对象被添加，删除或移动。这可以通过调用renderRows（）函数，该函数将渲染差异，因为最后一张桌子渲染。如果数据数组引用已更改，则表将自动触发对行的更新。

https://material.angular.io/components/table/api#MatTable

尝试以下操作。

@ViewChild(MatTable) _matTable:MatTable<any>;

 addNew() {
    this.items.push(new FormGroup({
      itemKey: new FormControl(),
      itemName: new FormControl()
    }));
    this._matTable.renderRows();
  }

推送到FormArray不会更新mat-table

1 个答案: