0

Estoy haciendo un sistema en angular en el cual utilizo un modal; hasta ahí todo bien, sin embargo, al momento de confirmar la operación de borrar que está en el modal, lo que hace esta petición es un http delete y regresar a la pantalla del componente principal. Esto no se quita hasta que actualizo la página, que es cuando desaparece el registro borrado ya que en mi backend sí lo borra al realizar la petición.

Ya he intentado varias cosas que he visto en diferentes foros pero hasta ahora nada me ha funcionado.

En caso de que hubiera una forma de forzar a angular a actualizar la página cuando se da click en un botón les agradecería que me dijeran cuál es.

publication.html este es el componente principal

<section class="section" >
    <div class="background">
    </div>
    <section class="main col-xy-flexbox-center">
        
        
        <button class="create" (click)="postear()"><i class="fa-solid fa-clone"></i>Publicar Noticia</button>
        
        <ng-container class="news" *ngIf="error!='' ">
            <p>No existen mas oticias para mostrar</p>
        </ng-container>


        <article class="news col-xy-flexbox-center" *ngFor="let item of datos; let indice=index">

            <div class="options">
                <button class="btn" (click)="edit()"><i class="fa-solid fa-pen-to-square"></i> Editar</button>
                <button class="btn" (click)="confirm(id[indice])"><i class="fa-solid fa-trash-can"></i>Eliminar</button>
            </div>

            

            <div class="date">Fecha: <strong>{{item.date}}</strong></div>
            
            <img src="{{item.img}}" alt="">
            <h1 class="title">{{item.tittle}}</h1>
            <p>{{item.text.slice(0,300)}}</p>
            
            <ng-container *ngIf="modal$==true">
                <app-modal-publication></app-modal-publication>
            </ng-container>
       
        </article>
    </section>

</section>

publication.ts



  datos:Array<any>=[];//Aqui tendremos que delcarar que la incializacion se realizara con array ya que de otra forma marcara el error object object
  id:Array<String>=[];
  page:number=0;
  currentPage:number=1;
  pagina=0;
  modal$=false
  error:String="";
  constructor(private newservice:NewsService, private messageservise:MessageService, private router:Router, private publicationservice:PublicationService) {}
 
  ngOnInit(): void {
    this.loadNews();
    this.messageservise.modal$.subscribe(res => {this.modal$=res})
    
    
  }

  loadNews(){
    let value=this.newservice.getAllData().subscribe(res=>{
      if(res){
        let temp =Object.values(res).reverse();
      
        this.datos=temp; 

        let identifier=Object.keys(res).reverse();
        this.id=identifier;


      }
      else{this.error="No existen mas publicaciones para mostrar";}
      
      
      
    })
    
  }

  confirm(value:String){
    this.modal$=true;  
    this.publicationservice.deleteId=value;
    
    
  }

  edit(){
    this.router.navigate(['dashboard/publication/edit'])
  }

  postear(){
    this.router.navigate(['noticias/postear']);
  }

el siguiente componente es el modal:

modal.html

<div class="modal">
    <div class="modalDelete">
      
      <p class="title"><i class="fa-solid fa-triangle-exclamation"></i>ELIMINAR PUBLICACION</p>
      <P class="text">Estas seguro que deseas eliminar esta publicacion esta operacion no se puede revertir</P>
      <div class="modalDelete__btn">
        <button type="button" (click)="deletePublication()"><i class="fa-solid fa-eraser"></i>BORRAR</button>
        <button type="button" (click)="closeModal()"><i class="fa-solid fa-ban"></i>CANCELAR</button>
      </div>
    </div>
  </div>

modal.ts


  constructor(private messageservice:MessageService, private router: Router, private publicacionservice: PublicationService) { }
  modal$:boolean=false;

  ngOnInit(): void {
    this.messageservice.modal$;
  }

  closeModal(){
    this.messageservice.modal$.emit(false);
  }

  deletePublication(){
   
    let temp=this.publicacionservice.deleteId;
    this.publicacionservice.deletePublcation(temp).subscribe();

    alert("publicacion eliminada con exito");
    this.router.navigate(['dashboard/publication']);
    this.messageservice.modal$.emit(false);
    

  }

Este es mi servicio:

deletePublcation(id:String){
    return this.http.delete(`${this.db}/Post/${id}.json`);
  }
3
  • Hola Ernesto, podrías por favor agregar algo de tu código para poder ayudarte de la mejor manera.
    – GFlores98
    Commented el 11 ago. 2022 a las 21:40
  • Que utilizas para eliminar el registro? Estás utilizando JavaScript para algo? Como dice @GFlores98, deberías de añadir algo de código para poder ayudarte mejor
    – Maida
    Commented el 12 ago. 2022 a las 7:21
  • GFlores98 ya agregue el código. Para eliminar estoy utilizando typescript dentro de angular y la petición es un delte atreves del http
    – ernesto
    Commented el 12 ago. 2022 a las 16:52

1 respuesta 1

0

En tu modal.ts puedes enviarle el resultado de tu response al padre publication.ts Veo que usas EventEmitter podrías enviarle a través de un Output un valor boolean y recibir eso en el padre.

@Output() onDelete: EventEmitter<boolean> = new EventEmitter<boolean>(true);

Y en tu método:

deletePublication(){
   
    let temp=this.publicacionservice.deleteId;
    this.publicacionservice.deletePublcation(temp).subscribe();
    // Si se eliminó enviar true, 
    // pero debería ir dentro del subscribe para ver si efectivamente funcionó
    this.onDelete.emit(true);

    alert("publicacion eliminada con exito");
    //this.router.navigate(['dashboard/publication']);
    this.messageservice.modal$.emit(false);    
  }

Y recibir la petición en el padre

onDelete(val:boolean){if (val) this.loadNews(); }

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.