Как проверить, что p-datatable был отрисован?

#angular #primeng-datatable

Вопрос:

Допустим, у меня есть родительский и дочерний компоненты.

 <button (click)="downloadReport()">Download Report</button>

<app-child-component [reportMode]="reportMode" (onReportModeReady)="onReportModeReady">
</app-child-component>

В дочернем компоненте мне нужно скрыть / отобразить некоторый основной компонент

 <p-datatable #dtNormal ngIf="!reportMode"></p-datatable> //normal data table

<p-datatable#dtReport ngIf="reportMode"></p-datatable> //strip out version for report.

Проблема, с которой я сталкиваюсь, заключается в том, что отчет создается еще до того, как обычный параметр скрыт и отображается таблица отчета.

Я хотел бы создать отчет только после того, как таблица отчета будет видна, чтобы дочерний компонент мог запустить событие, сообщающее родительскому компоненту, что все готово.

Как я узнаю, что отчет с примерами datable готов?

Спасибо

1. Не могли бы вы, пожалуйста, рассмотреть возможность репликации этого с помощью образца StackBlitz ? Было бы полезно взглянуть на.

2. @SiddAjmera Стекблитц???

3. Что вы подразумеваете под «готовым»? вы имеете в виду отрисованный?

4. @Calidus: да. Я имею в виду, когда p-DataTable был отрисован. После того, как p-DataTable был отрисован в дочернем компоненте, я хотел бы уведомить родительский компонент.

Ответ №1:

Вы могли бы искать элемент в dom document.getElementById("dtReport"); во время каждого ngAfterViewChecked поиска, пока он не будет найден. Затем выдайте событие при первом его обнаружении.

https://angular.io/guide/lifecycle-hooks

Вместо использования ngIf вы могли бы переключать видимость, что было бы намного быстрее, потому что #dtReport создавался бы в dom при создании компонента, вместо того, чтобы создавать его при изменении reportModel.

к вашему сведению, p-datatable устарел, он был заменен на p-table

1. большое спасибо. Я потрачу больше времени на изучение остальных хуков жизненного цикла. Кроме того, чтобы ответить на то, почему я все еще использую p-dataTable , потому что мы унаследовали проект от другой команды. Мы будем обновлять решение после следующего выпуска. Еще раз спасибо.

Ответ №2:

Мне нужно было знать, когда были отрисованы и использованы большие изображения:

 window.requestAnimationFrame(x => {
    // its loaded here.
});

Вам нужно будет найти что-то, к чему можно подключиться, чтобы вызвать вышеупомянутое, прежде чем пытаться загрузить его и т.д. Возможно, поместить его в свой собственный компонент.