Невозможно экспортировать таблицу после изменения источника данных, если таблица уже была экспортирована

Question

У меня возникли проблемы с поиском причины моей проблемы с mat-table-exporter; и я ищу руководство по устранению этой проблемы, поскольку у меня нет вывода console.log, с которым можно было бы работать, когда возникает эта проблема.

У меня есть то, что, как мне кажется, должно быть довольно распространенным шаблоном для загрузки данных в таблицу и замены dataSource; вот пример рассматриваемого кода: -

      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, указывающего на какую-либо ошибку; так что это сложно устранить.

Я бы хотел, чтобы была какая-то ошибка; но, возможно, чего-то не хватает, я не смог найти до сих пор с помощью googling ... например, нужно что-то обновить после изменения this.dataSource.data (хотя в таблице отображаются новые данные в порядке - и новые данные можно экспортировать тоже, только если я сначала не экспортировал что-то еще ...)

Надеюсь, это имеет смысл!

Glen

Версии: "mat-table-exporter": "^1.2.5", "@angular / core": "~8.2.14", "@angular / cdk": "~8.2.3", "@angular / material":" ^8.2.3",

Answer 1

Попробовав много вещей, включая обновление проекта с Angular 8 до 9, обнаружил следующее...

На пагинаторе был *ngIf, что означало, что он не был виден при загрузке отчета. Именно это и сломал мат-стол-экспортер. Удаление *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>

Answer 2

Вероятно, это потому, что ваш 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