如何在按钮点击时捕获Angular mat-table的全部数据？

为什么ngOnChanges没触发？ #

Angular的ngOnChanges只检测引用类型的引用变化，dataSource.data是数组，当你修改数组内元素的属性（比如用户编辑表格行字段），数组本身的引用并没有改变，所以ngOnChanges不会触发。

按钮点击时获取所有数据的两种方案 #

方案1：直接访问dataSource.data（简单场景）

如果你的表格行是直接绑定到dataSource对象的属性（比如用[(ngModel)]），那么用户修改UI时，dataSource.data里的对象已经同步更新了，直接在按钮点击事件里读取即可：

模板示例：

<mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef> 姓名 </mat-header-cell>
    <mat-cell *matCellDef="let element">
      <input [(ngModel)]="element.name" placeholder="姓名" />
    </mat-cell>
  </ng-container>
  <!-- 其他列类似 -->
</mat-table>

<button (click)="saveTableData()">保存数据</button>

组件代码：

saveTableData() {
  // 浅拷贝数组，避免后续操作修改原数据源
  const allTableData = [...this.dataSource.data];
  // 这里对allTableData做后续存储或处理
  console.log('表格所有修改后数据：', allTableData);
}

方案2：用FormArray管理（需表单验证/状态管理场景）

如果需要表单验证、状态跟踪，即使表格没关联父表单，也可以单独用FormArray管理每行数据：

组件代码：

import { FormArray, FormGroup, FormControl } from '@angular/forms';

tableFormArray: FormArray;

ngOnInit() {
  // 从初始数据源初始化FormArray
  this.tableFormArray = new FormArray(
    this.dataSource.data.map(item => new FormGroup({
      name: new FormControl(item.name),
      age: new FormControl(item.age)
      // 其他字段对应添加FormControl
    }))
  );
}

saveTableData() {
  // 获取所有表单值，已包含用户修改内容
  const allTableData = this.tableFormArray.value;
  console.log('表格所有修改后数据：', allTableData);
}

模板示例：

<mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef> 姓名 </mat-header-cell>
    <mat-cell *matCellDef="let element; let i = index">
      <input [formControl]="tableFormArray.at(i).get('name')" placeholder="姓名" />
    </mat-cell>
  </ng-container>
  <!-- 其他列类似绑定FormControl -->
</mat-table>

<button (click)="saveTableData()">保存数据</button>

内容的提问来源于stack exchange，提问作者Vivek Shukla