单击“角度”中的“删除”按钮时页面未刷新

Question

我有一个页面在“ http://localhost:4200/assignmentForAudit”上运行，并且用户界面看起来像

当我单击删除按钮时，数据将被删除，但页面不会刷新。我试图将this.router.navigate(['/assignmentForAudit']);放在删除操作之后，但是它没有刷新页面。如何实现这种刷新方法，以便删除数据？

要在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类方法来调用api操作

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

删除操作正常，但问题是页面未刷新。

Answer 1

完全不建议您在使用angular时作为最佳实践，您可以在每个data list之后简单地发出delete，也可以通过视觉方式更新数据，但是如果您想要这种行为。

第一种情况，通过重新加载整个页面，您可以在每次delete

之后重新加载整个页面

window.location.reload();

第二种情况，如果您只需要重新加载组件，则可以解决该问题并通过破解来实现（只是欺骗您导航的component离开并再次导航）

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

/DummyComponent可能是一个空组件，您将用它来欺骗需要刷新/重新加载的实际组件

Answer 2

而不是尝试重新加载页面，而是调用http方法，该方法用于在delete http调用成功后再次填充条目。

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

您还可以使用BehaviorSubject发出一个值，并监听它，可以决定再次调用this.entries = this.http.get()。

Answer 3

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

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

Answer 4

您能演示如何将对象数组绑定到模板吗？我认为您只需从数组中删除项目，然后使用模板，它也会更新数据。

类似这样的东西：

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