Angular - 使用 FormControl Array 作为数据源时向 mat-table 添加新行答案

【问题标题】：Angular - add new row to mat-table when using FormControlArray as dataSourceAngular - 使用 FormControl Array 作为数据源时向 mat-table 添加新行
【发布时间】：2019-05-12 06:40:47
【问题描述】：

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

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

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

我有几个问题

由于我使用 formarray 并将每个集合绑定到 mat-table，与将单个 dataSource 绑定到 mat-table 的常规方法相比，这是实现代码的正确方法吗？
在将单个数据源绑定到 mat-table 时，我们曾经像 dataSource = new MatTableDataSource() 这样初始化数据源，然后将数据绑定到类型脚本文件中的 dataSource.data 属性，在 .html 页面中我们更新数据源到 mat-table 的 [dataSource] 属性，如 mat-table [dataSource] = "datasource"。但是如何循环遍历表单数组并将数据绑定到 html 中的 [dataSource] 属性。由于数据是动态的，我们不能直接在 .ts 文件中将 dataSource 初始化为 MatTableDataSource。（或）如果有实现方式请告诉我

【问题讨论】：

1) 您可以使用这种绑定 2) 使用#table 指令，您可以在组件中使用@ViewChild 选择器访问表属性。这样，您就可以访问 this.table.datasource 并更改其结构。

标签： angular

【解决方案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 并在 addRow() 方法中调用 renderRows() 以获取要添加行的 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()
  }

堆栈闪电战

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

【讨论】：

【解决方案2】：

使用以下两行。

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

【讨论】：