Параметр Angular Component не определен после запроса Http GET ⇐ Javascript

[Anonymous]

Я пытаюсь создать HTTP-приложение с помощью Angular 20, и у меня возникла проблема с одним из моих компонентов. Я делаю HTTP-вызов GET с помощью одной из моих служб к API и возвращаю все события, которые могу найти:
Служба событий:

Код: Выделить всё

public GetAllEventsCardInfo() : Observable {
return this.http.get("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 = of([]);
recipients : RecipientSummaryInfo[] = [];

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

constructor(private eventService : EventService) { }

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

home-page.html

Код: Выделить всё

@for (event of events$ | async; track event.Id){

} @empty {


No events found! Add an event to get started!


}

карточка отображения события принимает EventInfoи просто выводит имя и дату события в элемент div, как показано ниже:
event-display-card.html

Код: Выделить всё

{{ EventInfo.Name }}
{{ EventInfo.EventDate.toLocaleDateString() }}

Проблема в том, что я постоянно получаю сообщение об ошибке, в котором говорится, что невозможно получить доступ к свойству "toLocaleDateString", значение ctx.EventInfo.EventDate не определено . Я знаю, что это из-за .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"
}]

Если понадобится дополнительная информация, я с радостью предоставлю. Спасибо и хорошего дня!


Подробнее здесь: https://stackoverflow.com/questions/798 ... et-request