全局变量在HTTP调用中变得未定义

Question

我需要使用API​​ HTTP调用从服务器获取日期列表。之后，我需要在日历中显示该日期的背景色。

这里我很好地从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在将数据分配给HTTP调用中提到的this.unAvailableDays之前正在调用。

请帮助我。

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;
          }
        }
      });
    });
};