Question

我正在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中隔离日历，只更新事件，但函数事件找不到日历。

Answer 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开发人员。

Answer 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。

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

2 个答案: