глобальная переменная становится неопределенной в HTTP-вызове

Question

Мне нужно получить список дат с сервера, используя HTTP-вызов API. После этого мне нужно отобразить цвет фона для этой даты в календаре.

Здесь я получаю данные из HTTP-звонка. Эти данные присваиваются одной глобальной переменной. Эта глобальная переменная становится «неопределенной» после назначения данных (которые поступают с сервера).

Объявление глобальной переменной:

unAvailableDays: any = [];

HTTP-вызов:

beforeMonthViewRender(renderEvent: CalendarMonthViewBeforeRenderEvent): void {
    let startday =this.datepipe.transform(this.startDate,'MM-dd-yyyy');
    let endday = this.datepipe.transform(this.endDate,'MM-dd-yyyy');
    this.sharedService.GetUnAvailableTimeSlotsDatesBetweenTwoDatesByMemberID(this.sharedService.MemberID,startday,endday)
        .subscribe((data:any) => {
            this.unAvailableDays=data,
            console.log( this.unAvailableDays)
        });

    renderEvent.body.forEach(day => {
        const dayOfMonth = day.date.getDate();
        for(var i =0;i<this.unAvailableDays.length;i++) {
            console.log(dayOfMonth);
            if(new Date(this.unAvailableDays[i].date).getDate()==dayOfMonth) {
                day.cssClass = 'bg-pink';
                break;
            }
        }
    });

renderEvent вызывает перед присвоением данных this.unAvailableDays, который упоминается внутри HTTP-вызова.

Пожалуйста, помогите мне.

Answer 1

Вы должны переместить код renderEvent внутри подписки. Вы пытаетесь визуализировать что-то до того, как это будет назначено (код рендеринга вызывается наиболее вероятно до того, как ваш HTTP-вызов завершится).

В качестве подсказки всегда выровняйте код правильно, вы увидите его лучше.

beforeMonthViewRender(renderEvent: any): void {
  let startday = this.datepipe.transform(this.startDate, "MM-dd-yyyy");
  let endday = this.datepipe.transform(this.endDate, "MM-dd-yyyy");
  this.sharedService
    .GetUnAvailableTimeSlotsDatesBetweenTwoDatesByMemberID(
      this.sharedService.MemberID,
      startday,
      endday
    )
    .subscribe((data: any) => {
      this.unAvailableDays = data;
      console.log(this.unAvailableDays);

      renderEvent.body.forEach(day => {
        const dayOfMonth = day.date.getDate();
        for (var i = 0; i < this.unAvailableDays.length; i++) {
          console.log(dayOfMonth);
          if (new Date(this.unAvailableDays[i].date).getDate() == dayOfMonth) {
            day.cssClass = "bg-pink";
            break;
          }
        }
      });
    });
};