推送到 FormArray 不会更新 mat-table

Posted 2023-03-13

【中文标题】推送到 FormArray 不会更新 mat-table

【英文标题】：Push to FormArray doesnt update 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()
  ));

【参考方案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();