Пробую написать свой первый календарь с привязкой событий к серверу.
Проблема в том, что при нажатии на ячейку календаря начинает происходить бесконечная отправка запросов, и я не понимаю, почему так происходить. Подскажите, пожалуйста, в чём проблема.
Пока что проверяю, что просто запрос работает, поэтому выбор ячейки не влияет на сам запрос.
Html код компонента
<div class="calendar-container">
<div class="calendar">
<div class="calendar-headline">
<div class="calendar-headline-controls">
<div class="calendar-headline-control"(click)="goToPreviousMonth()">«</div>
<div class='calendar-headline-current-date'>
{{firstDayOfActiveMonth().monthLong![0].toLocaleUpperCase() +
firstDayOfActiveMonth().monthLong!.slice(1)}},
{{firstDayOfActiveMonth().year}}
</div>
<div class="calendar-headline-control" (click)="goToNextMonth()">»</div>
</div>
</div>
<div class="calendar-weeks-grid">
@for (weekDay of weekDays(); track $index) {
<div class="calendar-weeks-grid-cell">
{{weekDay}}
</div>
}
</div>
<div class="calendar-weeks-grid">
@for (dayOfMonth of daysOfMonth(); track $index) {
<div
[ngClass]="{'calendar-grid-cell' : true, 'calendar-grid-cell-today' : dayOfMonth.toISODate() == today().toISODate(),
'calendar-grid-cell-inactive' : dayOfMonth.month !== firstDayOfActiveMonth().month}" (click)="activeDay.set(dayOfMonth)">
{{dayOfMonth.day}}</div>
}
</div>
</div>
</div>
<div class="events-container">
@if (activeDay()) {
<div class="events-container">
@for (event of getEvents(activeDay()!) | async; track event.id) {
<div class="event">
<div class="event-name">{{event.name}}</div>
<div class="event-description">{{event.description}}</div>
</div>
}
</div>
}
</div>
логика компонента (ts)
import { CommonModule } from '@angular/common'
import {
Component,
computed,
inject,
InputSignal,
signal,
Signal,
WritableSignal,
} from '@angular/core';
import { DateTime, Interval } from 'luxon';
import { CalendarService } from '../../data/services/calendar-service.service';
import { toObservable } from '@angular/core/rxjs-interop'
@Component({
selector: 'app-calendar',
standalone: true,
imports: [CommonModule],
templateUrl: './calendar.component.html',
styleUrl: './calendar.component.scss',
})
export class CalendarComponent {
calendarService = inject(CalendarService)
today: Signal<DateTime> = signal(DateTime.local());
activeDay: WritableSignal<DateTime | null> = signal(null);
firstDayOfActiveMonth: WritableSignal<DateTime> = signal(
this.today().startOf('month')
);
weekDays: Signal<string[]> = signal([
'Пн',
'Вт',
'Ср',
'Чт',
'Пт',
'Сб',
'Вс',
]);
daysOfMonth: Signal<DateTime[]> = computed(() => {
return Interval.fromDateTimes(
this.firstDayOfActiveMonth().startOf('week'),
this.firstDayOfActiveMonth().endOf('month').endOf('week')
).splitBy({ days: 1 }).map(d =>{
if(d.start === null){
throw new Error('wrong dates');
}
return d.start;
})
});
goToPreviousMonth(){
this.firstDayOfActiveMonth.set(this.firstDayOfActiveMonth().minus({months: 1}))
}
goToNextMonth(){
this.firstDayOfActiveMonth.set(this.firstDayOfActiveMonth().plus({months: 1}))
}
getEvents(date: DateTime) {
console.log(date.toFormat('dd-MM-yyyy'))
return this.calendarService.getEvents(date.toFormat('dd-MM-yyyy'))
}
}
код сервиса, на котором запускается вызов запроса
import { HttpClient } from '@angular/common/http'
import { inject, Injectable } from '@angular/core';
import { DayEvent } from '../interfaces/event.interface'
@Injectable({
providedIn: 'root'
})
export class CalendarService {
http = inject(HttpClient);
getEvents(date: String) {
return this.http.get<DayEvent[]>(`https://7db8a3ba-ba18-405f-bbf9-39723c52f846.mock.pstmn.io/events/03-07-2024`)
}
constructor() { }
}
интерфейс события:
export interface DayEvent {
id: number
name: string
date: string
description: string
project: string
author: string
}