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

时间:2020-03-02 06:35:53

标签: typescript http global-variables angular7

我需要使用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之前正在调用。

please click here for Exption image

enter image description here

请帮助我。

1 个答案:

答案 0 :(得分:0)

您应将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;
          }
        }
      });
    });
};
相关问题