Angular Material Table 如何点击按钮保存表格内所有行数据？

这个需求完全可实现，Angular Material Table是数据驱动组件，所有表格行数据都存储在绑定的数据源中，无需操作DOM即可直接获取。

1. 组件TS基础配置 #

先补全你的组件TS代码，和你给出的模板代码对应适配：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';

// 定义表格行数据的类型
interface PeriodicElement {
  position: number;
  name: string;
  weight: number;
  symbol: string;
}

@Component({
  // 你的组件配置
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements AfterViewInit {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  // 初始化表格数据源，这里可以替换为你实际的接口返回/本地赋值的初始数据
  dataSource = new MatTableDataSource<PeriodicElement>([
    {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
    {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
    // 更多数据...
  ]);
  // 存储获取到的表格行数据数组
  savedTableData: PeriodicElement[] = [];

  // 绑定模板中的分页器
  @ViewChild(MatPaginator) paginator!: MatPaginator;

  ngAfterViewInit() {
    // 给数据源关联分页器，你模板中的分页功能才能生效
    this.dataSource.paginator = this.paginator;
  }

  // 下面对应不同场景写saveData方法即可
}

2. 按需实现saveData方法 #

根据你要获取的数据范围选对应实现：

• 场景1：获取全量表格数据，不受分页、搜索过滤影响，所有绑定到表格的原始数据全部取出：

saveData() {
  // 直接取dataSource的data属性就是全量行数据数组
  this.savedTableData = [...this.dataSource.data];
  // 后续可自行加存储逻辑：比如存localStorage、调后端接口提交等
  console.log('全量表格数据：', this.savedTableData);
}

• 场景2：仅获取当前分页的可见行数据，只拿用户当前页看到的这部分数据：

saveData() {
  const pageIndex = this.paginator.pageIndex;
  const pageSize = this.paginator.pageSize;
  const startCutIndex = pageIndex * pageSize;
  // 从全量数据中截取当前页的片段
  this.savedTableData = [...this.dataSource.data.slice(startCutIndex, startCutIndex + pageSize)];
  console.log('当前页可见数据：', this.savedTableData);
}

• 场景3：获取搜索过滤后的全量数据，如果你的表格加了搜索过滤功能，要拿过滤后的所有数据：

saveData() {
  // filteredData属性存储了经过过滤规则匹配后的所有行数据
  this.savedTableData = [...this.dataSource.filteredData];
  console.log('过滤后的全量数据：', this.savedTableData);
}

• 所有数据直接从数据源获取即可，不需要解析表格DOM节点，符合Angular数据驱动的开发逻辑，性能和稳定性更高
• 代码中使用扩展运算符...是为了做浅拷贝，避免后续修改savedTableData的时候影响原始表格数据源，不需要数据隔离的话可以直接赋值
• 如果你的dataSource没有用MatTableDataSource封装，是直接绑定的普通数组，直接取这个普通数组即可，逻辑完全一致

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