Асинхронный экспорт в Excel в Angular KendoUI экспортирует пустую коллекцию

Я пытаюсь заставить асинхронный экспорт в 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<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>

Может кто-нибудь пролить некоторый свет на это? Заранее спасибо.

Источник

2 ответа

Решение

Видимо, это из-за rxjs версия:

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

Опустившись rxjs а также rxjs-compat в 6.2.2 исправил проблему.

ОБНОВИТЬ

Натыкаясь на 6.4.0 также исправляет проблему.

Источник

Если вы добавите пакет @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;
}

Это должно работать

Источник
Другие вопросы по тегам