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

Question

假设我有一个父组件和一个子组件。

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

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

在子组件上我需要 hide/display 一些 PrimeNg 组件

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

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

我遇到的问题是，在隐藏法线和显示报告 table 之前，正在构建报告。

我想仅在报告 table 可见后才构建报告，以便子组件可以触发一个事件，告诉父组件一切就绪。

我怎么知道 Report primeNG datable 已经准备好？

谢谢

Answer 1

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

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

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

fyi p-datatable 已弃用，已替换为 p-table

Answer 2

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

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

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

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

How to check that a p-datatable has been rendered?

angular

primeng-datatable