0

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);
}
6
  • Dices que no se te actualiza esa información si no hasta que recargues la pagina, y eliminas satisfactoriamente información del admin en la BD, sospecho que se te ha olvidado eliminar en tu lista de admins en el frontend el admin que se elimino de manera correcta, creo que es una solución bastante sencilla.
    – Layer
    Commented el 10 may. 2020 a las 16:38
  • correcto, la cuestión está en eliminarlo del front, si no existiera el modal y lo elminara desde el index pulsando un botón sería super sencillo, pero no es caso, lo que no entiendo es como eliminar ese elemento desde el modal (que es otro componente independiente del index), o si tengo que modificar algo en el servicio. Disculpen soy un novato en angular Commented el 10 may. 2020 a las 16:46
  • Ummmm según entiendo ya haz logrado enviar la información al modal de manera correcta, creo que se puede hacer alrevez también para luego actualizar tu información en la otra parte.
    – Layer
    Commented el 10 may. 2020 a las 16:52
  • Una vez lei en stackoverflow hace mas o menos 1 mes una respuesta sobre event emitters que te ayudan a transportar información de un componente a otro cuando lo requieras, pero pues no manejo el event emiter y no he vuelto a ver la publicación... pero creo que puede ser útil en este caso, tendrías que consultar sobre event emitter de angular para transportar por ejemplo el id de la informacion eliminada desde el modal al componente que abrio el modal, y una vez tengas la data, hacer la respectiva actualización de datos (eliminarlo en tu arreglo de admins).
    – Layer
    Commented el 10 may. 2020 a las 16:56
  • 1
    no entiendo muy bien tu caso. Pero cuando cierras el dialog no puedes redireccionar al index? O volver a hacer el get del listado de admins? Con eso ya se actualizaria la vista
    – hawks
    Commented el 10 may. 2020 a las 17:28

2 respuestas 2

1

Por el diseño de tu aplicación para mi lo mas conveniente seria que declararas un EventEmitter en tu servicio y te suscribieras desde el componente que quieres refrescar.

Solo bastaría esta línea en tu servicio

 cambio = new EventEmitter<boolean>()

Y desde donde quieras detectar el cambio inyectas tu servicio, como hasta ahora y te suscribes a la propiedad de esta manera:

 this.usuarioService.cambio.subscribe(cambioOError=>{

      if(cambioOError){ 
        //... Tu logica
      }
    })

Yo uso "cambioOerror" solo por ejemplo, pero en realidad puedes dejarlo que en cuanto se detecte algo se ejecute tu lógica, sin el if, esto ya depende de ti. También es posible pasar otros datos.

Te dejo un ejemplo funcional aqui

0

Tal vez el change detector pueda ayudarte, en ciertos casos cuando esto no pasa tienes que usar el método detectChanges de la clase ChangeDetectorRef, (mas info acá https://angular.io/api/core/ChangeDetectorRef)

Solo necesitas inyectar el ChangeDetectorRef y después invocar el método detectChanges(); cuando hayas terminado de traer y asignar tus datos en la subscripción de tu observable.

constructor(private cd: ChangeDetectorRef) {}

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

        // Aquí se forza el redibujado de la app
        this.cd.detectChanges();


      },
      error => {
        console.log(error)
        this.closeDialog();
        this.snackBar.open(
          'Se ha producido un error', 'Cerrar', {
            duration: 3000
          })
      }
      );
  }

Igual acá hay una explicación genial de la estrategoia de detección de cambios que usa Angular https://alligator.io/angular/change-detection-strategy/

Igual no estaría de mas que des una revisada a la arquitectura de tu aplicación pues usar detectChanges(), a pesar de se una herramienta muy útil no es muy recomendada pues estas "cargando" de más tu app y el performance de tu app ppuede verse afectado considerablemente.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.