PrimeNG Calendar组件点击报错：getComputedStyle参数1非Element类型

使用PrimeNG Calendar组件时，组件可正常渲染显示日期、点击展开日历，但每次交互都会在控制台抛出错误：

Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'

报错来自非自定义文件，可尝试以下排查和解决步骤：

• 版本兼容性检查
  PrimeNG各版本对Angular有明确的依赖要求，版本不匹配会导致底层DOM操作异常。对照PrimeNG官方版本兼容矩阵，确认当前使用的PrimeNG版本与你的Angular项目版本适配。

• 确认CalendarModule正确导入
  确保组件所在模块已导入CalendarModule并添加到imports数组：

  import { CalendarModule } from 'primeng/calendar';
  
  @NgModule({
    imports: [
      // 其他依赖模块
      CalendarModule
    ]
  })
  export class YourFeatureModule { }
  

• 补全组件id与label的关联
  模板中label的for属性未对应Calendar组件的id，可能导致浏览器关联元素时出错。修改模板：

  <label for="fromDate">Choose start date: </label>
  <p-calendar id="fromDate" [(ngModel)]="fromDate" dateFormat="dd/mm/yy"></p-calendar>
  <label for="toDate"> Choose end date: </label>
  <p-calendar id="toDate" [(ngModel)]="toDate" dateFormat="dd/mm/yy"></p-calendar>
  

• 排查样式冲突
  全局自定义样式、第三方主题可能破坏PrimeNG组件的DOM结构，导致getComputedStyle获取元素失败。临时移除自定义全局样式或切换到PrimeNG默认主题，验证错误是否消失。

• 更新PrimeNG版本
  该错误可能是PrimeNG的已知bug，后续版本已修复。执行命令更新到最新兼容版本：

  npm install primeng@latest --save
  

• 检查条件渲染逻辑
  若Calendar组件在*ngIf、*ngFor等条件指令内，可能存在元素未完全初始化就被操作的情况。可通过ViewChild确保元素就绪后再交互，或调整条件渲染逻辑。

内容的提问来源于stack exchange，提问作者user20589877