Асинхронный экспорт 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>

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

Где вы заполняете collection$ и users$?

codingbadger 31.01.2019 17:47

@codingbadger забудьте о users$, это должен быть collection$ (сейчас отредактирую). collection$ — это наблюдаемый объект, возвращаемый службой и передаваемый компоненту сетки из его родительского компонента-контейнера.

GCirs 01.02.2019 12:32
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
2
707
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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. Спасибо за помощь в любом случае, ценю это.

GCirs 04.02.2019 09:36
Ответ принят как подходящий

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

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

Удаление rxjs и rxjs-compat в 6.2.2 устранило проблему.

ОБНОВИТЬ

Переход на 6.4.0 также устраняет проблему.

Спасибо, что добавили свой собственный ответ, сегодня я столкнулся с точно такой же проблемой. Замена rxjs и rxjs-compat на 6.4.0 также устраняет эту проблему.

codingbadger 07.02.2019 17:05

Вы правы, теперь я добавлю это и к ответу. Спасибо!

GCirs 08.02.2019 10:03

Другие вопросы по теме