如何检查是否已呈现p-datatable？

Question

假设我有一个父子组件。

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

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

在子组件上，我需要隐藏/显示一些PrimeNg组件

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

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

我遇到的问题是，即使隐藏了法线，也会显示报告，然后显示报告表。

我只想在报告表可见之后构建报告，以便子组件可以触发一个事件，告诉父母一切都准备好了。

我怎么知道Report primeNG数据表准备好了？

谢谢

Answer 1

您可以在每个document.getElementById("dtReport");搜索dom中的元素ngAfterViewChecked，直到找到它为止。然后在第一次找到它时发出事件。

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

您可以切换可见性，而不是使用ngIf，因为#dtReport将在创建组件时在dom中创建，而不是在reportModel更改时创建它。

fyi p-datatable已弃用，已被p-table取代

Answer 2

我需要知道何时渲染和使用大图像：

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

在尝试加载它之前，你必须找到一些东西来调用上面的内容，等等。也许把它放到它自己的组件中。