全日历角度-更新eventDrop和eventResize的数据库

Question

我在一个角度项目中设置了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 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

可能存在自我参照问题。将var self=this;放在ngOnInit第一行。

比将this.appointmentService.updateInstallBoardAppointments(info);更改为

 self.appointmentService.updateInstallBoardAppointments(info);