如何使用 NgOnChanges 更新 FullCalendar 上的事件？答案

【问题标题】：How to Update Events on FullCalendar with NgOnChanges?如何使用 NgOnChanges 更新 FullCalendar 上的事件？
【发布时间】：2019-07-10 13:54:34
【问题描述】：

我正在开发 Angular 7 上的预订房间应用程序。

我正在使用完整的日历来显示数据库中的事件。

FullCalendar 在一个房间中运行良好，但每次我从另一个房间切换时，它都会初始化另一个日历。

我的代码如下所示。

 ngOnChanges(changes: any) {

    this.getAllReservations();
    
  }

public getAllReservations() {

    let apiUrl: string = `api/Reservations/Room=${this.selection}`;
    this.repository.getData(apiUrl).subscribe(res => {
      this.Reservations = res as Reservation[];

      //full calendar intit
      var calendarEl = document.getElementById('calendar');
      var calendar = new Calendar(calendarEl, {
        
        events: this.Reservations.map(function (x) { 
          return {
            title: x.Note,
            start: x.StartDate,
            end: x.EndDate
          };
        }),
      });     
      calendar.render();
      },
      (error) => {
        this.errorHandler.handleError(error);
        this.errorMessage = this.errorHandler.errorMessage;
      })
  }

我重复一遍，这段代码运行良好，我得到了我的事件。 => Proof.

但是每次我打电话给房间时都会在下面创建一个新日历，这是我的问题。

我完全明白了，但我找不到解决问题的方法。我试图在ngOnInit中隔离Calendar，只更新事件，但是函数events没有找到Calendar。

【问题讨论】：

标签： javascript angular events fullcalendar

【解决方案1】：

好的 Christophe Sacchi，如果我假设您只使用您的 api 预订一个房间，这很正常。您应该汇总每个房间的所有预订：

public getAllReservations() {
  this.Reservations = [];
  rooms.map(room => {
    const apiUrl: string = `api/Reservations/Room=${room}`;
    const roomReservations = this.repository.getData(apiUrl).subscribe(res => res as Reservation[],
      (error) => {
        this.errorHandler.handleError(error);
        this.errorMessage = this.errorHandler.errorMessage;
      });
    this.Reservations.push(roomReservations);
  });

  //full calendar intit
  const calendarEl = document.getElementById('calendar');
  const calendar = new Calendar(calendarEl, {
    events: this.Reservations.map(roomReservations => roomReservations.map(reservation => ({
        title: reservation.Note,
        start: reservation.StartDate,
        end: reservation.EndDate
      })),
    ),
  });
  calendar.render();
}

如果你尝试这样的事情（在没有测试的情况下内联完成，所以你可能需要稍微更新一下），它有效吗？

对不起，我不是 Angular 开发人员。

【讨论】：

【解决方案2】：

我用这个解决了我的问题：

 getAllReservations() {
    let apiUrl: string = `api/Reservations/Room=${this.selection}`;
    this.repository.getData(apiUrl).subscribe(res => {
      this.Reservations = res as Reservation[];      
    this.calendar.getEvents().map(function(x){
      x.remove();
    });     
      for (var i = 0; i < this.Reservations.length; i++){
        var x = this.Reservations[i];
        this.calendar.addEvent({
          title: x.Note,
          start: x.StartDate,
          end: x.EndDate
        });
      }    
       
    }),
      (error) => {
        this.errorHandler.handleError(error);
        this.errorMessage = this.errorHandler.errorMessage;
      }
  }
}

我做了一个循环列出我所有的预订然后我在日历中添加了事件。

感谢 E-Liberty 的 Leo POUPET。

【讨论】：