javascript - PrimeNG:对话框在初始化后没有响应

Question

我有带 p-dialog 的 Angular 应用程序来自 PrimeNG 4.2.2 的组件

对话框显示动态内容(里面有一个表格)。如果表格没有全屏显示，它应该显示滚动条，以便用户能够看到对话框底部的元素。

问题是对话框仅在调整浏览器窗口大小后才会响应。对话框初始化后，对话框不会进入屏幕，页脚的界面元素不可见。 resize后才进入正常状态。

我使用以下声明:

<p-dialog *ngIf="displayDialog" [(visible)]="displayDialog" 
        [responsive]="true" [modal]="true" 
        width="800" minWidth="850">
</p-dialog>

问:有人知道如何让对话框出现在屏幕上后响应吗？或者这可能是一个错误？有什么解决方法吗？

目前，我正在考虑在对话框初始化后手动生成调整大小事件。

Answer 1

我找到了使用 CSS 的解决方法:

我将对话框元素的内容包装到具有特定样式的 div 中:

<p-dialog ...>
    <div class="ui-grid ui-grid-responsive ui-fluid"
         style="overflow-y: auto; max-height: calc(100vh - 250px);">
        ...content
    </div>
</p-dialog>

它看起来不理想，但工作正常。

另一种选择是触发调整大小事件:

window.dispatchEvent(new Event('resize'));

它也能正常工作，但需要一些延迟调用，这不太好。