Muy buenas, tengo un crud de administradores en angular 9, el cual realiza peticiones a un API, al eliminar un admin, se despliega un modal de confirmación, al aceptar, el admin se elimina satisfactoriamente, pero tengo que refrescar la pantalla para que se puedan observar los cambios, la información viaja de la siguiente manera:
index -> admin-card -> delete-modal
en el index.ts tengo lo siguiente:
constructor(private adminService: AdminService) {
this.adminService.readAdmin()
.subscribe(
response =>{
this.adminsLoading=false;
this.adminList=response;
});
}
Ese 'adminList' es un arreglo que se le pasa al componente hijo (admin-card) en la vista del index, ejemplo (index.html):
<div *ngFor="let admins of adminList" fxFlex="32" fxFlex.lt-md="100" fxFlex.lt-sm="100">
<app-admin-card [admin]="admins" class="mat-elevation-z2"></app-admin-card>
</div>
Luego, en el componente admin-card, se le envía el 'admin.id' (desde el admin-card.html) al modal para eliminar el admin. Este es el método que tengo en admin-card.ts:
openDeleteDialog() {
const dialogRef = this.dialog.open(DeleteModalComponent,{
data: {
adminData: this.admin
}
});
posteriormente, la info es enviada al modal el cual tiene dos botones (cancelar y confirmar), al hacer click en confirmar se ejecuta deleteAdmin(), anexo el código de la función:
deleteAdmin(){
let id = this.data.adminData.id;
let password = this.firstFormGroup.value.pass;
this.adminService.deleteAdmin(id, password)
.subscribe(
response => {
console.log(response)
this.closeDialog();
this.snackBar.open(
'Administrador eliminado satisfactoriamente', 'Cerrar', {
duration: 3000
})
},
error => {
console.log(error)
this.closeDialog();
this.snackBar.open(
'Se ha producido un error', 'Cerrar', {
duration: 3000
})
}
);
}
y por último, anexo el codigo de la función que realiza la petición al API para eliminar el admin (admin.service.ts):
deleteAdmin(id: number, password){
return this.http.delete(environment.url+'/admins/'+id, password);
}