推送到 FormArray 不会更新 mat-table答案

【问题标题】：Push to FormArray doesnt update mat-table推送到 FormArray 不会更新 mat-table
【发布时间】：2019-07-23 18:03:21
【问题描述】：

我有一个带有 FormArray 的 FormGroup 和一个显示数组的 mat-table。当我将新的 FormGroup 添加到 FormArray 时，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()
  }));
}

【问题讨论】：

标签： angular typescript angular-material angular7 angular-forms

【解决方案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();
  }

【讨论】：