如何正确使用 MatTableExporterModule 将数据导出到 excel？答案

【问题标题】：How to correctly use MatTableExporterModule to export data to excel?如何正确使用 MatTableExporterModule 将数据导出到 excel？
【发布时间】：2021-04-19 01:00:42
【问题描述】：

我正在使用Angular 9 中的mat-table-exporter npm 模块来导出垫表组件。

我可以使用test 作为导出文件的名称正确导出它。

以前的工作代码：

<mat-table matTableExporter [dataSource]="dataSource" #exporter="matTableExporter">

<button mat-raised-button (click)="exporter.exportTable('csv', {fileName:'test',
   Props: {Author: 'myName'}})">
   Export
</button>

我还想在导出文件的名称中添加时间戳，为此我编写了以下代码：

新组件代码：

exportTable(): void {
  this.exporter.exportTable('csv', {
    filename: `test-${new Date().toISOString()}`,
    Props: { 
      Author: 'myName'
    }
  })
}

新的 HTML 代码：

<mat-table matTableExporter [dataSource]="dataSource" #exporter="matTableExporter">

<button mat-raised-button (click)="exportTable()">Export</button>

以上代码报错：

TS2552: Cannot find name 'exporter'.

【问题讨论】：

标签： html angular npm angular-material interpolation

【解决方案1】：

如果您想在组件中使用exporter，则需要使用ViewChild，您的html代码将保持不变，但组件应更改为：

@ViewChild(MatTableExporterDirective, { static: true }) exporter: MatTableExporterDirective;
exportIt() {
  this.exporter.exportTable(ExportType.CSV, {
    fileName: "test",
    Props: {
      Author: "myName"
    }
  });
}

【讨论】：

非常感谢。我没有定义它的类型，因此出错了。