Javascript 单击“删除”按钮时未刷新页面

我有一个页面在“”处运行，UI看起来像

当我点击删除按钮时，数据会被删除，但页面不会被刷新。我试着把

这个.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' });
  }

deleteGroupFromSelection（id:number）：可观察{
返回this.http.delete（`this.baseUrl}/${id}`，{responseType:'text'}）；
}

---

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

您可能需要在角路由中使用“OnSameurNavigation”选项

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

---

不要尝试重新加载页面，而是调用http方法，该方法用于在删除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（）

再次。

当您使用angular时，不建议将其作为最佳做法。您可以在每次

删除
后简单地发出
数据列表
，这样您也可以直观地更新数据，但如果您需要这样的行为。

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

window.location.reload();

第二种情况如果您只需要重新加载组件，您可以解决这个问题，并通过黑客攻击来实现它（只是为了欺骗
组件
您导航离开并再次导航到它）

/DummyComponent
可能是一个空组件，您只需要使用它来欺骗实际组件，您需要刷新/重新加载它
您可以演示如何将对象数组绑定到模板吗？我认为你们只需从数组中删除项，然后它也会更新数据

大概是这样的：

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

它说它不能被任何[]
window.location.reload（）所识别
应该可以工作，但它确实可以完成页面刷新，我建议在成功删除后重新加载，只需从网格中删除即可。在服务器端删除项目后，您需要再次查询项目列表。获得列表后，只需将其重新分配给相应组件的属性。否则Angular不知道发生了什么变化。这篇文章可能会帮助您我需要重新加载相同的页面“/assignmentAudit”，那么我如何才能将其放入此.http.get（）？由于这是SPA，我们必须避免重新加载页面，并尽可能多地重新加载/刷新数据。但加载整个页面不是一个好的做法：（.只需重新加载组件我只需更新应该适用于您的答案“第二种情况”
this.nas.assignmentAudit = this.nas.assignmentAudit.filter(a => a.id !== this.assignmentAudit.id);