未找到数据时如何显示无数据导出警报 Angular 6 kendo-excelexport 组件

Question

下面是代码：我使用了angular6 kendo-excelexport ^4.5.0版本的组件。

<kendo-excelexport [data]="excelDataToExport" [collapsible]="true" fileName="Sample.xlsx" #excelexport>
                <kendo-excelexport-column field="taxMonth" title="Month" [width]="200">
                </kendo-excelexport-column>
                <kendo-excelexport-column field="clientName" title="Client Name" [width]="200">
                </kendo-excelexport-column>
                <kendo-excelexport-column field="alertType" title="Alert Type" [width]="200">

                <kendo-excelexport-column field="Description" title="Description" [width]="200">
                </kendo-excelexport-column>

</kendo-excelexport>

Answer 1

主要思想是测试数据：如果存在，则可以显示 table。如果为空，则可以显示一条消息。如果您在模板中绑定它，如果组件加载后数据发生变化，变更检测会为您更新 DOM：

<div *ngIf="excelDataToExport">...table code here ....</div>

<div *ngIf="!excelDataToExport">No data to export present</div>

要进一步改进此代码，您可以使用模板来避免使用两个 ngIf-s： ... 并定义一个模板：

<ng-template #noDataLabel>No data to export present</ng-template>

它将替换div的内容。阅读更多相关信息 in the documentation。

Answer 2

如果是数组，检查excelDataToExport的长度。如果长度大于 0，下载 excel sheet 否则显示警告。

为此，在导出按钮的 click 事件上使用条件表达式。

请找到工作示例：Demo

示例中comment/uncomment product.ts 文件中的数据分别查看无数据警报/下载 excel。

Answer 3

您可以使用触发器 excel 手动导出操作，如下所示：

Stackblitz Demo

因为您可以在名为 onExcelExport

的函数中添加所需的功能

未找到数据时如何显示无数据导出警报 Angular 6 kendo-excelexport 组件

How to Display No Data for Export Alert when there is no data found Angular 6 kendo-excelexport Component

export-to-excel

kendo-grid

angular

angular6