devextreme 调度程序插件的刷新错误 - angular 4

Question

我正在尝试使用 devextreme scheduler 制作约会调度程序的应用程序。我有一个小错误。我想知道为什么，当我创建约会并拖放我刚刚创建的约会时，我的控制台上出现此错误：

PUT http://localhost/v0/croissant/undefined 404 (Not Found)
appointment.service.ts:19 An error occurred Response {_body: "", status: 404, ok: false, statusText: "Not Found", headers: Headers…}
webpackJsonp.../../../../../src/app/services/appointment.service.ts.AppointmentService.handleError @ appointment.service.ts:19
ZoneDelegate.invoke @ zone.js:203
onInvoke @ core.es5.js:3890
ZoneDelegate.invoke @ zone.js:202
Zone.run @ zone.js:96
(anonymous) @ zone.js:462
ZoneDelegate.invokeTask @ zone.js:236
onInvokeTask @ core.es5.js:3881
ZoneDelegate.invokeTask @ zone.js:235
Zone.runTask @ zone.js:136
drainMicroTaskQueue @ zone.js:368
ZoneTask.invoke @ zone.js:308
core.es5.js:1020 ERROR Error: Uncaught (in promise): Response with status: 404 Not Found for URL: http://localhost/v0/croissant/undefined

但是当我刷新页面然后移动约会时，一切正常...

这是我在 appointment.Service.ts

上的更新预约方法

updateAppointment(id: string, userId :string, timestamp :string, reason: string): Promise<Appointment>{

    let bodySearchParam = new URLSearchParams();
    bodySearchParam.append('userId', userId );
    bodySearchParam.append('timestamp', this.datetotimestamp(timestamp).toString());
    bodySearchParam.append('reason', reason);
    let body = bodySearchParam.toString();


    var AppointmentUrlUpdate = this.AppointmentUrlWrite + "/" + id;

    return this.http.put(AppointmentUrlUpdate, body)
                    .toPromise()
                    .then(response =>
                      console.log("event updated")
                    )
                    .catch(this.handleError);

  }

这是我的日历组件上的事件处理程序

  updateAppointment(e: any){
    e.appointmentData.endDate = this.add30mnTo(e.appointmentData.startDate); // bugFix pour l'affichage du calendrier
    this.appointmentService.updateAppointment(e.appointmentData.id, e.appointmentData.ownerId, e.appointmentData.startDate, e.appointmentData.text)
  }

这里是我在 calendar.component.html

上调用事件处理程序的地方

<dx-scheduler
    (onAppointmentUpdated)= "updateAppointment($event)"
>

</dx-scheduler>

感谢您的帮助！

Answer 1

问题是，我的 api 需要 ID 来更新约会。但暂时不存储 id。决议的方法是：

  createAppointment(userId :string, timestamp :string, reason: string): Promise<Appointment> {

    let bodySearchParam = new URLSearchParams();
    bodySearchParam.append('userId', userId );
    bodySearchParam.append('timestamp', this.datetotimestamp(timestamp).toString());
    bodySearchParam.append('reason', reason);
    let body = bodySearchParam.toString();

    console.log(body)
    return this.http.post(this.AppointmentUrlWrite,body)
                  .toPromise()
                  .then(response =>
                    this.createdId = response.json().id // Get the appointment's ID
                  )
                  .catch(this.handleError);
  }

创建一个函数 returns createdID:

  getCreatedId(){
    return this.createdId;
  }

并在 updateAppointment 方法上执行此操作：

if(e.appointmentData.id == null){e.appointmentData.id = this.appointmentService.getCreatedId();}

该条件适用于已经有id的约会（刷新页面后所有约会都有id）

希望它可以为另一个服务:)

devextreme 调度程序插件的刷新错误 - angular 4

refresh error on devextreme scheduler's plugin - angular 4

javascript

devexpress

scheduler

devextreme

angular