Question

下面是我的stackblitz示例，其中显示了所有公司及其各自的联系人。遍历每个公司并将联系人绑定到mat-table。到目前为止，它正在工作。

https://stackblitz.com/edit/angular-riepzk-2k5mcv?file=app%2Ftable-basic-example.html

但是我需要为各自公司的mat-table添加一个新行。我已经实现了在addRow方法中将新联系人推送到现有表单数组集合的逻辑。但这对垫子表没有影响，但是我可以在“ form.value”中看到更新的联系人。

我在这里有几个问题

由于我使用formarray并将每个集合绑定到mat-table，与将单个dataSource绑定到mat-table的常规方法相比，这是实现代码的正确方法吗？
将单个数据源绑定到mat-table时，我们用于初始化数据源，例如dataSource = new MatTableDataSource（），然后将数据绑定到类型脚本文件中的dataSource.data属性，并在.html页面中更新数据源类似于 mat-table [dataSource] =“ datasource” 的mat-table的[dataSource]属性。但是循环遍历表单数组并将数据绑定到html中的[dataSource]属性的情况如何。由于数据是动态的，因此我们无法直接在.ts文件中将dataSource初始化为MatTableDataSource。（OR）请让我知道是否有一种实现方式

Answer 1

MatTable不会在使用数组作为数据源时自动重新呈现...您需要在表上调用renderRows()方法以更新视图中的表。

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

https://material.angular.io/components/table/overview#1-write-your-mat-table-and-provide-data

获得QueryList和所有MatTables的视图

 @ViewChildren(MatTable) _matTables

将i传递到addRow()

 (click)="addRow(c.controls.contacts, i)

接受i并在您的renderRows()方法中调用addRow()，为您要向其添加行的MatTable索引。

addRow(elem: FormArray, i) {
    console.log('add row');
    console.log(elem);

    elem.push(
      this.fb.group({
        id: [0],
        contactName: ['kris'],
        emailId: ['kris@gmail.com'],
        adminAgent: [false],
        collateralAgent: [false],
        trusteeAgent: [false],
      })
    );
   this._matTables['_results'][i].renderRows()
  }

Stackblitz

https://stackblitz.com/edit/angular-riepzk-ztcclu?embed=1&file=app/table-basic-example.ts

Answer 2

使用以下两行。

this.datasource.data.push(<newObject>);
this.datasource.data = this.designationDetails.data.slice();

角度-使用FormControlArray作为数据源时将新行添加到mat-table

2 个答案: