PrimeNG日历技术问题：修复'Uncaught (in promise)'错误及编辑显示已存日期

我来帮你搞定这两个PrimeNG日历的问题，先从代码里的问题点入手：

1. 修复'Uncaught (in promise)'错误 #

你代码里的核心问题是在ngOnInit中使用了await，但没有把ngOnInit声明为async函数，另外toPromise()已经被Angular弃用了，推荐用firstValueFrom或者lastValueFrom来替代。

修复方案： #

把ngOnInit改成异步函数，同时替换toPromise()为更推荐的API：

import { firstValueFrom } from 'rxjs'; // 记得导入这个

async ngOnInit() {
  this.classPrg = this.classPrgStore.state.entry.data;
  if (!this.classPrg) {
    const id: string = this.activedRoute.snapshot.params['id'];
    // 使用firstValueFrom替代toPromise()
    await firstValueFrom(this.classPrgStore.loadClassPrg(id));
    this.classPrg = this.classPrgStore.state.entry.data;
    // 确保日期转成Date对象
    this.classPrg.startDate = new Date(this.classPrg.startDate);
    this.classPrg.endDate = new Date(this.classPrg.endDate);
  }
}

如果不想用async/await，也可以用订阅的方式处理Observable，避免Promise相关的异常：

ngOnInit() {
  this.classPrg = this.classPrgStore.state.entry.data;
  if (!this.classPrg) {
    const id: string = this.activedRoute.snapshot.params['id'];
    this.classPrgStore.loadClassPrg(id).subscribe({
      next: () => {
        this.classPrg = this.classPrgStore.state.entry.data;
        this.classPrg.startDate = new Date(this.classPrg.startDate);
        this.classPrg.endDate = new Date(this.classPrg.endDate);
      },
      error: (err) => {
        // 这里可以添加错误处理，避免未捕获的异常
        console.error('加载数据失败:', err);
      }
    });
  }
}

2. 编辑状态下显示已保存的日期 #

要让PrimeNG日历正确显示已保存的日期，需要确保两个关键点：

关键点1：绑定的变量必须是Date类型 #

PrimeNG的<p-calendar>默认只识别Date对象，如果你从后端拿到的是字符串格式的日期（比如"2024-05-20T00:00:00"），必须把它转换成Date对象。你代码里已经做了这一步，但要注意避免转换undefined/null，可以加个判断：

this.classPrg.startDate = this.classPrg.startDate ? new Date(this.classPrg.startDate) : null;
this.classPrg.endDate = this.classPrg.endDate ? new Date(this.classPrg.endDate) : null;

关键点2：确保日历组件的格式匹配 #

如果你的日期显示还是有问题，可以给<p-calendar>指定format属性，和你后端返回的日期格式对应，比如：

<p-calendar 
  name="startDate" 
  [(ngModel)]="classPrg.startDate"
  format="yyyy-mm-dd"
  placeholder="选择开始日期">
</p-calendar>
<p-calendar 
  name="endDate" 
  [(ngModel)]="classPrg.endDate"
  format="yyyy-mm-dd"
  placeholder="选择结束日期">
</p-calendar>

额外注意：确保数据加载完成后再渲染 #

如果你的组件在数据加载前就渲染了日历，可能会出现日期不显示的情况，可以用*ngIf确保classPrg存在后再渲染日历：

<div *ngIf="classPrg">
  <p-calendar name="startDate" [(ngModel)]="classPrg.startDate"></p-calendar>
  <p-calendar name="endDate" [(ngModel)]="classPrg.endDate"></p-calendar>
</div>

这样就能保证编辑状态下，已保存的日期正确显示在日历组件里了。

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