I sent a simple request to the server to remove the item
staff.component.ts
delete(staff: Staff, index: number) {
if (staff.id != null) {
this.staffService.delete(staff.id)
.subscribe(() => {
this.staffList.splice(index, 1);
});
}
}
staff.service.ts
delete(id: number): Observable<any> {
const urlDelete:string = this.SERVER_API + id;
return this.http.delete<Staff>(urlDelete, this.httpOptions);
}
After deletion, there is an update on the server, but the list in staff.component.ts only refreshes twice. How can I ensure that the list is immediately updated after clicking the delete button?
employee.component.html
<tr *ngFor="let staff of staffList; let i = index">
<td>{{staff.name}}</td>
<td>{{staff.surname}}</td>
<td>{{staff.email}}</td>
<td>{{staff.salary}}</td>
<td>{{staff.department}}</td>
<td>
<span class="btn btn-outline-primary" routerLink="get-staff/{{staff.id}}">View</span>
</td>
<td>
<span class="btn btn-outline-primary" routerLink="update-staff/{{staff.id}}">Update</span>
</td>
<td>
<form (submit)="delete(staff, i)">
<button class="btn btn-outline-primary" type="submit">Delete</button>
</form>
</td>
</tr>
After deletion, there is an update on the server, but the list in staff.component.ts only refreshes twice. How can I ensure that the list is immediately updated after clicking the delete button?