angular - fullcalendar angular - 在 eventDrop 和 eventResize 上更新数据库

Question

我已经在一个 Angular 项目中设置了 fullcalendar，并且已经成功地从我的 api 中提取数据来填充事件:

@Component({
  selector: 'app-installboard',
  templateUrl: './installboard.component.html',
  styleUrls: ['./installboard.component.scss']
})
export class InstallboardComponent implements OnInit {

  appointments: any = [];

  constructor(private appointmentService: AppointmentService) { }

  ngOnInit(): void {
    this.pullAppointments();
  }

  public pullAppointments() {
    this.appointmentService.getInstallBoardAppointments().subscribe(data => {
      // logic for processing data into events array //
      this.renderCalendar();
    });
  }

我遇到麻烦的地方就在这里。我已将 eventDrop 和 eventResize 添加到日历中，但我对它们的回调函数的范围感到非常困惑？我希望能够调用我的服务并传入参数以创建 api 调用回数据库并保存更新。

我曾尝试调用服务以及组件中的公共(public)函数，但都抛出 typescript 错误，指出这些函数不存在。

  public renderCalendar() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new Calendar(calendarEl, {
      plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin, bootstrapPlugin],
      editable: true,
      themeSystem: 'bootstrap',
      header: { center: 'dayGridMonth, timeGridWeek, list' },
      timeZone: 'UTC',
      businessHours: {
        daysOfWeek: [1, 2, 3, 4, 5],
        startTime: '08:30',
        endTime: '17:00'
      },
      slotDuration: '00:15:00',
      slotLabelInterval: '01:00',
      scrollTime: '08:00:00',
      hiddenDays: [0],
      eventSources: this.appointments,
      eventDrop: function(info) {
        console.log(info.event.id);
        console.log(info.event.start);
        console.log(info.event.end);
        this.appointmentService.updateInstallBoardAppointments(info);
      },
      eventResize: function(info) {
        alert('it changed');
      }
    });

    calendar.render();
  }

Answer 1

可能存在自引用问题。试试这个

public renderCalendar() {
    var calendarEl = document.getElementById('calendar');
    var self=this;
    var calendar = new Calendar(calendarEl, {
      plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin, bootstrapPlugin],
      editable: true,
      themeSystem: 'bootstrap',
      header: { center: 'dayGridMonth, timeGridWeek, list' },
      timeZone: 'UTC',
      businessHours: {
        daysOfWeek: [1, 2, 3, 4, 5],
        startTime: '08:30',
        endTime: '17:00'
      },
      slotDuration: '00:15:00',
      slotLabelInterval: '01:00',
      scrollTime: '08:00:00',
      hiddenDays: [0],
      eventSources: this.appointments,
      eventDrop: function(info) {
        console.log(info.event.id);
        console.log(info.event.start);
        console.log(info.event.end);
        self.appointmentService.updateInstallBoardAppointments(info);
      },
      eventResize: function(info) {
        alert('it changed');
      }
    });

    calendar.render();
 }