异步 Excel 在 Angular 中导出 KendoUI 导出空 collection

Question

我试图让一个异步 excel 导出在我们的一个网格中工作，但我一直得到一个 空 xsls 文件，只有 collectionheaders。

数据在网格中正确呈现，带有过滤和分页。

我尝试按照此处的文档进行操作但没有成功，这是我的实现：

我的相关部分component.ts：

@Input() collection$: Observable<User[]>;

ngOnInit() {
  this.allData = this.allData.bind(this);
}

allData(): Observable<GridDataResult> {
  return this.collection$.pipe(
    map(users => ({ data: users, total: users.length }))
  );
}

我尝试的第一件事是直接 return this.collection$; 但 行为是相同的: excel 中的空 collection =] 文件因此我尝试 returning 一个 Observable<GridDataResult> 而不是成功。

我的相关部分component.html：

<kendo-grid
  [kendoGridBinding]="collection$ | async"
  pageSize="10"
  [pageable]="true"
  [filterable]="true"
>
  <ng-template kendoGridToolbarTemplate>
    <button type="button" kendoGridExcelCommand icon="file-excel">
      Export to Excel
    </button>
  </ng-template>

  <!-- columns -->

  <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
  <kendo-pager-info></kendo-pager-info>
  <kendo-pager-next-buttons></kendo-pager-next-buttons>
  <kendo-pager-page-sizes [pageSizes]="[5, 10, 40]"></kendo-pager-page-sizes>
  <kendo-grid-excel
    fileName="Users.xlsx"
    [fetchData]="allData"
  ></kendo-grid-excel>
</kendo-grid>

任何人都可以阐明这一点吗？提前致谢。

Answer 1

如果您添加包 @progress/kendo-angular-excel-export 并将您的 allData() 函数修改为：

public allData(): ExcelExportData {
   const result: ExcelExportData = {
       data: this.collection$.pipe(
      map(users => ({ data: users, total: users.length })).data
   };
   return result;
}

应该可行

Answer 2

显然是因为 rxjs 版本：

https://github.com/telerik/kendo-angular/issues/1962

将 rxjs 和 rxjs-compat 删除到 6.2.2 解决了这个问题。

更新

跳到 6.4.0 也解决了这个问题。

异步 Excel 在 Angular 中导出 KendoUI 导出空 collection

Asynchronous Excel Export in Angular KendoUI exports empty collection

kendo-ui

kendo-ui-angular2

angular