【问题标题】:Asynchronous Excel Export in Angular KendoUI exports empty collectionAngular KendoUI 中的异步 Excel 导出导出空集合
【发布时间】:2019-01-29 11:02:29
【问题描述】:

我试图让异步 Excel 导出在我们的一个网格中工作,但我始终得到一个 空 xsls 文件,其中只有集合标题

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

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

相关部分在我的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 }))
  );
}

我尝试的第一件事是直接返回this.collection$;,但行为相同:excel文件中的空集合因此我尝试返回Observable&lt;GridDataResult&gt;,但也没有成功。

相关部分在我的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>

任何人都可以对此有所了解吗?提前致谢。

【问题讨论】:

  • 你在哪里填充collection$users$
  • @codingbadger 忘记users$,应该是collection$(现在将编辑)。 collection$ 是从服务返回的可观察对象,从其父容器组件传递到网格组件。

标签: angular kendo-ui kendo-ui-angular2


【解决方案1】:

显然是因为rxjs版本:

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

rxjsrxjs-compat 删除到6.2.2 解决了这个问题。

更新

访问6.4.0 也可以解决此问题。

【讨论】:

  • 感谢您添加您自己的答案,我今天实际上遇到了完全相同的问题。将 rxjsrxjs-compat 碰撞到 6.4.0 也可以解决此问题
  • 你是对的,现在也将它添加到答案中。谢谢!
【解决方案2】:

如果您添加包@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;
}

应该可以的

【讨论】:

  • 这会引发各种 TS 编译器错误。一些类型转换可以修复错误,但问题仍然存在,显然问题在于 rxjs 版本。无论如何感谢您的帮助,不胜感激。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-03-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-12-12
相关资源
最近更新 更多