0

我在排除 mat-table-exporter 问题的原因时遇到了一些问题；并且正在寻找有关如何解决此问题的指导，因为发生此问题时我没有可使用的 console.log 输出。

我有我想象的将数据加载到表中并替换数据源的非常常见的模式；这是一些有问题的代码示例：-

The TypeScript
// I have radio buttons on a page to select a different report...
this.regionReportService.getRegionReport(this.reportType, this.regionName, this.regionStats[this.selectedReportNumber].reportId);


// I have a subscription to replace mat-table data when a different report is selected - it's set up in ngOnInit

this.getRegionReportItemsSub = this.regionReportService.getRegionReportListener().subscribe(result => {      
  this.dataSource.data = result;
  this.setAdminReviewedOptions();
  this.reportDisplay = "normal";
  this.isLoading = false;
  this.isLoadingReport = false;
})


this.regionReportService.getRegionReport(this.reportType, this.regionName, this.regionStats[0].reportId);

和 HTML...

// On the component HTML, I have a button to export the table to Excel
<button style="margin-right: 20px" [disabled]="isChangingEntry || isLoadingReport" 
mat-raised-button (click)="exporter.exportTable('xlsx', {fileName:  makeFileName(),
sheet: 'sheet 1', Props: {Author: 'Portal'}})"><mat-icon>download</mat-icon>Export to Excel</button>



// The table begins...
 <mat-table matTableExporter [dataSource]="dataSource"
                [ngStyle]="{'display' : isLoadingReport ? 'none' : ''}"
                #exporter="matTableExporter"
                (exportStarted)="isExporting = true"
                (exportCompleted)="isExporting = false"
                matSort matSortActive="itemPrims" matSortDirection="desc" ....

这是有问题的场景：-

  • 工作：如果我在初始报告加载时导出到 Excel，那工作正常；isExporting 在导出时为真。

  • 作品：如果我选择不同的报告（单选按钮），那么 this.dataSource 被替换；这也很好。

  • 不起作用：如果导出报告；然后我选择不同的报告（单选按钮） - 我无法再次使用导出功能。当我单击“导出到 Excel”时，isExporting 设置为“true”，但没有其他任何反应，它永远不会返回 false，并且没有 console.log 输出指示任何错误；所以很难排除故障。

我希望有一些错误；但也许到目前为止我无法通过谷歌搜索找到一些丢失的东西......比如在更改 this.dataSource.data 后需要刷新一些东西（虽然，表格显示新数据很好 - 新数据是可导出的也一样，只要我没有先导出其他东西......）

希望这是有道理的！

格伦

版本：“mat-table-exporter”：“^1.2.5”、“@angular/core”：“~8.2.14”、“@angular/cdk”：“~8.2.3”、“@angular/material ": "^8.2.3",

解决方案：删除 mat-paginator 上的 *ngIf

4

2 回答 2

1

在尝试了很多事情，包括将项目从 Angular 8 升级到 9 之后，发现了以下...

分页器上有一个 *ngIf ，这意味着在加载报告时它不可见。正是这个破坏了 mat-table-exporter。删除 *ngIf 解决了该问题。

这个：-

<mat-paginator *ngIf="!isLoadingReport" #paginator [pageSize]="[100]" [pageSizeOptions]="[100, 500, 1000, 5000]" showFirstLastButtons></mat-paginator>

已更改为：-

<mat-paginator #paginator [pageSize]="[100]" [pageSizeOptions]="[100, 500, 1000, 5000]" showFirstLastButtons></mat-paginator>
于 2021-12-09T17:22:03.327 回答
0

这可能是因为您mat-table matTableExporter没有检测到更改，因为您正在更新dataSource对象的数据属性。

由于引用没有改变，只有一个属性 Angular 不会检测到变化。

您可以尝试这样的事情，在示例中我们重新分配对象数据源以进行检测。

 this.getRegionReportItemsSub = this.regionReportService.getRegionReportListener().subscribe(result => {      
  this.dataSource= { 
     ...this.dataSource,
     data = result
  };
  this.setAdminReviewedOptions();
  this.reportDisplay = "normal";
  this.isLoading = false;
  this.isLoadingReport = false;
})

其他方法是使用ngZone手动触发更改检测器，有关此检查的更多信息，请查看以下链接NgZone

于 2021-12-07T18:11:14.910 回答