在导出SlickGrid的数据时如何获得装载程序/旋转器？

Question

我正在使用slickgrid（2.12.2）和angular8。我想知道如何在将数据导出到csv，excel或文件时显示加载程序/旋转程序。因为如果数据很大，则导出会花费一些时间，并且使用该文件的人可能会认为什么都没发生...

Answer 1

我认为类似这样的方法应该对您有用。根据Angular-SlickGrid的来源，exportService.exportToFile函数返回一个Promise。

您可以在调用该函数之前设置一个标志，并使用返回的promise的'then'块在导出完成后停止微调器。

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

    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，它发出一个事件，该事件（如上所示）是从angle-slickgrid组件输出的。

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

它们是公共的，因此您可以直接在ExportService上访问它们。您可以在onGridBeforeExportToFile发出事件时将Spinner标志设置为true，在onGridAfterExportToFile发出事件时将其设置为false。