我正在用Angular 20构建一个HTTP应用，并且在其中一个组件上遇到问题。我正通过一个服务对API发起HTTP GET请求，并返回我能找到的所有事件：

事件服务：

public GetAllEventsCardInfo() : Observable<EventInfo[]> {
    return this.http.get<EventInfo[]>("https://localhost:7034/Event");
  }

在调试时检查后，我可以确认返回的是一个包含一个 EventInfo 的数组，其所有属性都包含正确的值。然后我将该结果传递给另一个组件进行显示。以下是我调用API的方式：

home-page.ts

 @Component({
  selector: 'app-home-page',
  imports: [EventDisplayCard, RecipientDisplayCard, EventAddModule, MatIconModule, RecipientAddModal, AsyncPipe],
  templateUrl: './home-page.html',
  styleUrl: './home-page.css'
})
export class HomePage {
  events$ : Observable<EventInfo[]> = of([]);
  recipients : RecipientSummaryInfo[] = [];

  addModalVisible : boolean = false;
  addRecipientVisible : boolean = false;

  constructor(private eventService : EventService) { }

  ngOnInit() {
    this.events$ = this.eventService.GetAllEventsCardInfo();
  }
}

home-page.html

<div class="flex flex-wrap relative">
                @for (event of events$ | async; track event.Id){
                        <event-display-card [EventInfo]="event" />
                } @empty {
                    <div id="" class="mt-5">
                        <div class="w-70 mx-2 bg-slate-100 border-slate-300 border-l border-b border-r border-solid z-29 ring event-card">
                            <span>No events found! Add an event to get started!</span>
                        </div>
                    </div>
                }
            </div>

事件显示卡片正在获取 EventInfo，并将名称和事件日期输出到一个div中，如下所示：

event-display-card.html

<div id="" class="cursor-pointer mt-5" (click)="eventClick()">
    <div class="w-70 mx-2 bg-slate-100 border-slate-300 border-l border-b border-r border-solid z-29 ring event-card">
        <div class="flex">
            <div class="font-serif text-sm w-2/3 text-center py-2">
                <div>{{ EventInfo.Name }}</div>
                <div>{{ EventInfo.EventDate.toLocaleDateString() }}</div>
            </div>
            <div class="w-1/3"></div>
        </div>
    </div>
</div>

问题在于我持续收到一个错误，错误信息为 can't access property "toLocaleDateString", ctx.EventInfo.EventDate is undefined 。我知道这与 .toLocaleDateString() 有关，但我无法弄清为什么传入参数的EventInfo会是空的。

如果有人能帮忙指导一下，我将不胜感激。我在后端搭建方面很有经验，但这是我第一次尝试前端应用。

export class EventInfo {
  public Id: string = "";
  public Name: string = "";
  public EventDate: Date = new Date();
  public Budget: number = 0;
};

返回的JSON看起来像：

[{
  "id":"019c9136-a438-72bb-b983-76a1b4d3b514",
  "name":"test",
  "budget":220,
  "eventDate":"2026-02-10T18:00:00-06:00"
}]

如果需要任何额外信息，请随时告诉我。感谢您，祝您有美好的一天！

解决方案

如果你在使用.NET Core 8，并且希望API以“PascalCase”（其实就是不做转换）的变量名返回，你可以在program.cs中这样使用

builder.Services.AddControllers().AddJsonOptions(options => {
    options.JsonSerializerOptions.PropertyNamingPolicy = null;
});

但真正的问题在于你的EventInfo.EventDate不是Date，而是从API接收到的字符串

通常你会在服务中使用map，将收到的API数据中的属性转换为Date

public GetAllEventsCardInfo() : Observable<EventInfo[]> {
    return this.http.get<EventInfo[]>("https://localhost:7034/Event").pipe(
    map(events=>{
      events.forEach((x:any)=>{
        x.EventDate=new Date(x.EventDate)
      })
      return events
    })
  )
  }

以及当你需要“发布”一个事件时

public SaveEvent(event:EventInfo)<Success>{
   const data={...event,DateEvent=formatDate(event.DateEvent,"yyyy-MM-ddTHH:MM:00","en-GB")
   return this.http.post<Success>("http://localhost:7034/Event/Save",data);
}