Как отобразить данные для оповещения об экспорте, когда данные не найдены Angular 6 Компонент kendo-excelexport - PullRequest
Новая
       16

Как отобразить данные для оповещения об экспорте, когда данные не найдены Angular 6 Компонент kendo-excelexport

4 голосов
/ 21 января 2020

Ниже приведен код: я использовал angular 6 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>

Ответы [ 3 ]

3 голосов
/ 30 января 2020

Проверьте длину excelDataToExport, если это массив. Если длина больше 0, загрузите таблицу Excel, в противном случае отображается предупреждение.

Для этого используйте условное выражение для события click кнопки экспорта.

Найдите рабочий пример: Демо

В Пример комментирует / раскомментирует данные в файле product.ts, чтобы увидеть предупреждение об отсутствии данных / загрузить Excel соответственно.

2 голосов
/ 30 января 2020

Вы можете использовать действие экспорта в триггер Excel вручную следующим образом:

Демонстрация Stackblitz

В этом случае вы можете добавить необходимые функции в функцию с именем onExcelExport

2 голосов
/ 27 января 2020

Основная идея - проверить данные: если они есть, вы можете отобразить таблицу. Если оно пустое, вы можете отобразить сообщение. Если вы свяжете его с шаблоном, обнаружение изменений позаботится об обновлении 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. Подробнее об этом в документации .

...