Clash Royale CLAN TAG#URR8PPP

(Angular 6) Data won't reloaded

I use angular 6, I got a problem after I did update/create an object and reload all the data, it seems the old data were reloaded. I tried to add random number but it won't work as well.

My code as follow:

Inside my Service:

getPayCalendars(): Observable<PayCalendar>

return this.authHttp.get<PayCalendar>(this.baseUrl+"payCalendar/all"+"?rand="+Math.random());



Inside my component:

reloadPayCalendars()

console.log("RELOAD PAYCALS");
this.adminSettingService.getPayCalendars().subscribe(
(result) =>
this.payCalendars = result;
console.log(`Result: $JSON.stringify(result)`);
, error =>
this.alertify.error("Error: Cannot retrive pay calendars");

);



The ReloadCalendars() being called from this method after saving the data from the child component using EventEmitter. I saw the data was changed in DB.

updatingData(result: any)

this.reloadPayCalendars();
this.modalRef.hide();


<app-form-paycalendar
[id]="id"
[name]="name"
[frequency]="frequency"
[payPeriodStartDate]="payPeriodStartDate"
[payPeriodEndDate]="payPeriodEndDate"
[nextPaymentDate]="nextPaymentDate"
(onSubmit)="updatingData($event)"></app-form-paycalendar>


I add another button to call reloadPayCalendars() and it got new/updated data.

<button type="button" class="btn btn-primary" (click)="reloadPayCalendars()"> Reload </button>

How to solve this ?

Fyi: backend using Dotnet Core 2.1 with C#.

Edited:
add component where I use to save/updating data

CHILD Component:

save()

let payCalendar = this.editForm.getRawValue();
if(payCalendar.id != null)
this.adminService.updatePayCalendar(payCalendar).subscribe(
result =>
payCalendar = result ;
this.alertify.success("Update Pay Calendar Successfully");
, error =>
this.alertify.error(error);

);
else
this.adminService.createPayCalendar(payCalendar).subscribe(
result =>
payCalendar = result ;
this.alertify.success("Update Pay Calendar Successfully");
, error =>
this.alertify.error(error);

);

this.onSubmit.emit(payCalendar: payCalendar);



so after this method being called, it will emit to parent and the parent called "updatingData()" above.

this.payCalendars

result

array of objects

result

this.payCalendars

1 Answer
1

I found the solution. I retrive the data while the create/update still in progress in background. so I emit the event just after I finished create/update data.

save()

let payCalendar = this.editForm.getRawValue();
let opResult: PayCalendar ;
if(payCalendar.id != null)
this.adminService.updatePayCalendar(payCalendar).subscribe(
result =>
opResult = result;
this.alertify.success("Update Pay Calendar Successfully");
**this.onSubmit.emit(payCalendars: opResult);**
, error =>
this.alertify.error(error);

);
else
this.adminService.createPayCalendar(payCalendar).subscribe(
result =>
opResult = result;
this.alertify.success("Create Pay Calendar Successfully");
**this.onSubmit.emit(payCalendars: opResult);**
, error =>
this.alertify.error(error);

);




By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.