Page not refreshed when clicked delete button in angular

Question

I have a page running at " http://localhost:4200/assignmentForAudit " and the UI looks like

When i click delete button then the data gets deleted but the page is not refreshed. I tried to put this.router.navigate(['/assignmentForAudit']); after delete operation but it is not refreshing the page.How can i achieve this refresh method so that the data gets removed?

method to delete in component.ts

onDelete(nas:any){
   this.assignmentAudit.id=nas.assignmentAudit[0].id;
   console.log(this.assignmentAudit.id);
  if(window.confirm('Are sure you want to delete this item ?')){
     this.assignmentAuditService.deleteGroupFromSelection(this.assignmentAudit.id)
      .subscribe(
        data => {
          console.log(data);
        },
        error => console.log(error));
   }
    this.router.navigate(['/assignmentForAudit']);

}

assignment-audit.service.ts class method to call the api operation

deleteGroupFromSelection(id: number): Observable<any> {
    return this.http.delete(`${this.baseUrl}/${id}`, { responseType: 'text' });
  }

Delete operation is working fine but the problem is the page is not refreshing.

Answer 1

that's not recommended at all as a best practice when you using angular you can simple emit data list after every delete with that you update the data visually too but if you want such behavior.

First Case by reload the whole page you can do so after every delete

window.location.reload();

Second Case if you need just to reload the component you can work around that and achieve it by a hack (just to trick the component you navigate away and navigate again to it)

this.router.navigateByUrl('/DummyComponent', {skipLocationChange: true}).then(() => this.router.navigate(['Your actualComponent you want to reload']));

/DummyComponent could be a empty component you just gonna use it to trick the actual component you need to refresh/reload

Answer 2

Instead of trying to reload the page, call the http method which is used to populate the entries again on success of the delete http call.

     this.assignmentAuditService.deleteGroupFromSelection(this.assignmentAudit.id)
          .subscribe(
            data => {
this.entries = this.http.get() // something like this. here this.entries refers to data that is used to populate html.
              console.log(data);
            },
            error => console.log(error));
       }

You can also use a BehaviorSubject to emit a value, listening to it, you can decide on calling this.entries = this.http.get() again.

Answer 3

您可能需要在Angular路线中使用“ onSameUrlNavigation”选项。

RouterModule.forRoot(routes, {onSameUrlNavigation: ‘reload’})

Answer 4

Can your show how to binding array of object to template ? I thinks you just remove item from array then template it will update data too.

something like this:

this.nas.assignmentAudit = this.nas.assignmentAudit.filter(a => a.id !== this.assignmentAudit.id);