refresh refresh sur le plugin devextreme scheduler - angular 4

Question

J'essaie de créer une application de planificateur de rendez-vous en utilisant devextreme scheduler. J'ai un petit bug. Je voudrais savoir pourquoi, quand je crée un rendez-vous et faites glisser le rendez-vous que je viens de créer j'ai cette erreur sur ma console:

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 

mais quand je rafraîchir la page, puis je déplace la nomination, tout fonctionne très bien ...

Voici ma méthode de nomination de mise à jour sur mes 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); 

    } 

voici mon eventHandler sur mon calendrier composante

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) 
    } 

et voici où j'appelle mon eventHandler sur mon calendar.component.html

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

</dx-scheduler> 

Merci de votre aide!

Answer 1

Le problème est, mon api besoin et ID pour mettre à jour le rendez-vous. Mais l'identifiant n'est pas stocké pour le moment. La méthode de la résolution est:

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); 
    } 

faire une fonction qui renvoie le createdID:

getCreatedId(){ 
    return this.createdId; 
    } 

et sur la méthode updateAppointment faire ceci:

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

la condition sert à la nomination qui est déjà avoir un identifiant (tous les rendez-vous ont un identifiant après l'actualisation de la page)

Espérons qu'il peut servir pour un autre :)