Как получить загрузчик / спиннер при экспорте данных из SlickGrid?

Question

Я использую slickgrid (2.12.2) и angular 8. Я хочу знать, как я могу показать загрузчик / спиннер, когда данные экспортируются в CSV, Excel или файл. Потому что, если данные велики, экспорт займет некоторое время, и человек, который их использует, может подумать, что ничего не происходит ...

Answer 1

Обратите внимание, что я автор Angular-Slickgrid. Из вопросов и ответов, которые я видел, мне кажется, что мне не хватало этой функции, описанной в моих вики (есть много вики, пожалуйста, прочтите их), и поэтому я обновил оба вики Экспорт в Excel и Экспорт в файл (CSV / TabDelimited) , Пример группировки - это единственная демонстрационная версия, показывающая эту функцию, поскольку единственная, которая может иметь много данных (если вы решите использовать строки по 50 КБ)из демо и используйте группировку).

Вот обновленная вики для экспорта в Excel

Вариант 1 (рекомендуется)

Просмотр

<span [hidden]="!processing">
   <i class="fa fa-refresh fa-spin fa-lg fa-fw"></i>
</span>

<angular-slickgrid gridId="grid2"
                     [dataset]="dataset"
                     [columnDefinitions]="columnDefinitions"
                     [gridOptions]="gridOptions"
                     (onGridBeforeExportToExcel)="processing = true"
                     (onGridAfterExportToExcel)="processing = false"
                     (onAngularGridCreated)="angularGridReady($event)">
</angular-slickgrid>

Компонент

export class MyComponent() implements OnInit {
  processing = false;
}

Согласно ответу @ Wingnod, вы также можете подписаться на событие в своем коде, но лучше просто использовать генераторы событий (onGridBeforeExportToExcel), так как вам не нужно заботиться об отмене подписки, а кодочиститель. Если по какой-то причине вы хотите подписаться на событие, вы можете сделать это следующим образом:

Вариант 2 (не рекомендуется)

Просмотр

<angular-slickgrid gridId="grid2"
        [dataset]="dataset"
        [columnDefinitions]="columnDefinitions"
        [gridOptions]="gridOptions"
        (onAngularGridCreated)="angularGridReady($event)">
</angular-slickgrid>

Компонент

export class GridGroupingComponent implements OnInit, OnDestroy {
  exportBeforeSub: Subscription;
  exportAfterSub: Subscription;

  ngOnDestroy() {
    this.exportBeforeSub.unsubscribe();
    this.exportAfterSub.unsubscribe();
  }

  angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;

    // display a spinner while downloading
    this.exportBeforeSub = this.angularGrid.exportService.onGridBeforeExportToFile.subscribe(() => this.processing = true);
    this.exportAfterSub = this.angularGrid.exportService.onGridAfterExportToFile.subscribe(() => this.processing = false);
  }
}

Вы можете видеть, что Вариант 1 намного чище и проще в реализации.

Answer 2

Я думаю, что-то вроде этого должно работать для вас. Согласно источнику Angular-SlickGrid, функция exportService.exportToFile возвращает обещание.

Вы можете установить флаг перед вызовом функции и использовать блок then для возвращенного обещания, чтобы остановить счетчик послеэкспорт завершен.

@Component({
    ...
})
export class MyComponent {
    loading: boolean = false;

    constructor (private exportService: ExportService ) {
        ...
    }

    exportToCSV (): Promise<bool> {
        return this.exportService.exportToFile({
            ...
        });
    }

    onExportBtnClicked () {
        this.loading = true;

        this.exportToCSV.then(() => {
            // Assuming it succeeds.
            this.loading = false;
        });
    }
}

Angular-SlickGrid также имеет следующие выходные свойства.

  @Output() onGridBeforeExportToFile = this.exportService.onGridBeforeExportToFile;
  @Output() onGridAfterExportToFile = this.exportService.onGridAfterExportToFile;
  @Output() onGridBeforeExportToExcel = this.excelExportService.onGridBeforeExportToExcel;
  @Output() onGridAfterExportToExcel = this.excelExportService.onGridAfterExportToExcel;

Внутренне расширение меню для Angular-SlickGrid использует ExportService.exportToFile, которое генерирует событие,который (как показано выше) выводится из компонента angular-slickgrid.

@Injectable()
export class ExportService {
    ...
    onGridBeforeExportToFile = new Subject<boolean>();
    onGridAfterExportToFile = new Subject<{ content?: string; filename: string; format: string; useUtf8WithBom: boolean; }>();
}

Они являются общедоступными, поэтому вы можете получить к ним доступ непосредственно из ExportService. Вы можете установить для своего флага счетчика значение true, когда onGridBeforeExportToFile генерирует событие, и значение false, если onGridAfterExportToFile.

Подводя итог, служба экспорта является источником всего, что связано с экспортом для Angular-SlickGridбиблиотека, независимо от того, нажимаете ли вы пользовательскую кнопку для экспорта или нажимаете «Экспорт в формате CSV» в расширении меню и т. д.