PrimeNg 内联日历在对话框中不起作用答案

【问题标题】：PrimeNg Inline Calendar not working in DialogPrimeNg 内联日历在对话框中不起作用
【发布时间】：2022-12-11 04:22:49
【问题描述】：

在对话框组件内使用时，primeng 日历（内联）组件似乎存在错误。这是解决方法的已知问题吗？

在左侧，日历在常规组件中实例化。在右侧，日历在 <p-dialog> 中实例化

任务组件：

<p-calendar [(ngModel)]="date" [inline]="true" [showWeek]="true" [style]="{'position': 'fixed', 'overflow': 'visible', 'z-index': '1201'}"></p-calendar>

对话代码：

<p-dialog position="top-right" header="Neuer Task" [(visible)]="displayTask" [closeOnEscape]="false" showEffect="fade" [style]="{width: '30%', height: '50%'}" (onHide)="closeAction()" >
  <p class="line-height-3 m-0">
    <cd-task></cd-task>
  </p>
</p-dialog>

【问题讨论】：

尝试从样式中删除固定位置和 z-index。

标签： html angular primeng

【解决方案1】：

我通过在日历中添加 *ngIf="displayTask" 来解决这个问题。

【讨论】：

这个黑客也对我有用！感谢分享。我的对话框代码``` <p-dialog [(visible)]="displayEditDialog" [modal]="true" [breakpoints]="{'960px': '30vw'}" [style]="{width: ' 30vw' }" [draggable]="false" [resizable]="false" responsive="true" [transitionOptions]="'0ms'"> ```

【解决方案2】：

@Stefan 你的技巧对我也有用。我正在使用 PrimeNG 12 和 Angular 12，我的对话代码

<p-dialog [(visible)]="displayEditDialog" [modal]="true" 
          [breakpoints]="{'960px': '30vw'}"
          [style]="{width: '30vw' }" [draggable]="false" 
          [resizable]="false" 
          [transitionOptions]="'0ms'">

以及此模态内的日历

<p-calendar *ngIf="displayEditDialog" appendTo="body" ...></p-calendar>

【讨论】：