javascript - 单击 Angular 删除按钮时页面未刷新

Question

我有一个运行在“http://localhost:4200/assignmentForAudit”的页面，UI 看起来像

当我点击删除按钮时，数据被删除但页面没有刷新。我试图在删除操作之后放置 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 时，根本不推荐将其作为最佳实践，您可以在每次 delete 之后简单地发出 data list ，您也可以直观地更新数据，但是如果您想要这样的行为。

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

后这样做

window.location.reload();

第二种情况如果您只需要重新加载组件，您可以解决这个问题并通过 hack 实现它(只是为了欺骗您导航<的组件/em> 离开并再次导航)

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

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